在SCSS中预先设置父选择器

Question

我希望通过在SCSS中添加父选择器来嵌套选择器。

基本选择器是：

.selector-class .selector-class__element {}

这是HTML：

<div class="selector-class">
    <div class="selector-class__element"></div>
</div>

（A）以下是SCSS中的理想结果：

.selector-class {
    .selector-class__element {

    }
}

（B）这就是我想要这样做的理念：（不起作用）

.selector-class {
    &__element {

    }
}

有没有比使用（A）中的方法更有效的方式？

Answer 1

您只需在开头添加额外的＆符号：

.selector-class {
    & &__element {
      background: red;
    }
}

Answer 2

你需要尝试这个。这只是类和元素的一个例子。你可以尝试其中任何一个。

.selector-class {
   &.class, &div { background: blue; }
}

EDIT 下面是连接字符串的插值方法。

.selector-class {
   &#{'__element'} { background: blue; }
}

CSS

.selector-class .selector-class__element { background: blue; }

有关插值的更多信息

interpolation