提问者:小点点

Sass.SCSS:嵌套和多重类?


我在当前项目中使用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嵌套?


共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&将引发错误。