Sass.SCSS：嵌套和多重类？

Question

我在当前项目中使用Sass（.scss）。

以下示例：

HTML

<div class="container desc">
    <div class="hello">
        Hello World
    </div>
</div>

SCSS

.container {
    background:red;
    color:white;

    .hello {
        padding-left:50px;
    }
}

这个很管用。

我可以处理多个类，同时使用嵌套样式。

在上面的示例中,我讨论了以下内容：

CSS

.container.desc {
    background:blue;
}

在这种情况下，所有div.container通常为红色，但div.container.desc为蓝色。

我如何在container中与Sass嵌套？

Answer 1

您可以使用父选择器引用&，编译后它将被父选择器替换：

对于您的示例：

.container {
    background:red;
    &.desc{
       background:blue;
    }
}

/* compiles to: */
.container {
    background: red;
}
.container.desc {
    background: blue;
}

&将完全解析，因此如果父选择器本身是嵌套的，则在替换&之前将解析嵌套。

这个符号最常用来写伪元素和-类：

.element{
    &:hover{ ... }
    &:nth-child(1){ ... }
}

但是，您可以将&放置在您喜欢的任何位置^*，因此也可以执行以下操作：

.container {
    background:red;
    #id &{
       background:blue;
    }
}

/* compiles to: */
.container {
    background: red;
}
#id .container {
    background: blue;
}

但是，请注意，这会在某种程度上破坏嵌套结构，从而可能增加在样式表中查找特定规则的工作量。

*:&前面不允许使用空白字符。因此不能直接串联selector+&-#id&将引发错误。