使用占位符仅获取直接父级，而不是所有路径

Question

我有以下 sass:

%slider {
  .c-slider {
    $parent: &;
    &--thumb {
     #{$parent}__item{
       margin:0;
     }
    }
  }
}
.l-cap {
  @extend %slider;
}

我得到：

 .l-cap .c-slider--thumb .l-cap .c-slider__item {margin: 0; }

但我想获得：

.l-cap .c-slider--thumb .c-slider__item {margin: 0; }

我需要第二个来获取直接父级。我试过 @at-root 但没有成功。

Answer 1

这是实现它的唯一方法

%slider {
  .c-slider {
    &--thumb {
     .c-slider__item{
        margin:0;
      }
    }
  }
}

.l-cap {
  @extend %slider;
}

结果将是

.l-cap .c-slider--thumb .c-slider__item {
  margin: 0;
}

对于更复杂的嵌套，您可以使用@at-root

.grand-parent {
  .parent {
    @at-root .myDiv {
      color: blue; 
    }
  }
}

结果将是

.myDiv {
  color: blue;
}

Answer 2

您也可以使用这种方法。 & 是一个 sass list of lists referenced to all parent elements for current selector, 所以你可以在 & 上使用所有的列表函数并且很容易得到 [=12 的第 n 个子元素=] 您的选择（在本例中为第二个）：

%slider {
  .c-slider {

    // Get just the second selector
    $parent : nth(nth(&, 1), 2);

    // Output
    &--thumb #{$parent}__item{
      margin:0;
    }

  }
}

.l-cap {
  @extend %slider;
}

将输出：

.l-cap .c-slider--thumb .c-slider__item {
  margin: 0;
}

使用占位符仅获取直接父级，而不是所有路径

Get only the imediate parent, not all path, using placeholders

sass

scss-mixins