我在当前项目中使用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嵌套?
您可以使用父选择器引用&
,编译后它将被父选择器替换:
对于您的示例:
.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&
将引发错误。