我正在为我当前的项目使用 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
通常都是 red
,但 div.container.desc
是蓝色的。
如何使用 Sass 将其嵌套在 container
中?
可以使用parent selector reference &
,编译后会被父选择器替换:
对于您的示例:
.container {
background:red;
&.desc{
background:blue;
}
}
/* compiles to: */
.container {
background: red;
}
.container.desc {
background: blue;
}
&
将完全解析,因此如果您的父选择器本身嵌套,则嵌套将在替换 &
之前解析。
此符号最常用于编写 pseudo-elements and -classes:
.element{
&:hover{ ... }
&:nth-child(1){ ... }
}
但是,您几乎可以将 &
放置在您喜欢的任何位置*,因此也可以进行以下操作:
.container {
background:red;
#id &{
background:blue;
}
}
/* compiles to: */
.container {
background: red;
}
#id .container {
background: blue;
}
但是请注意,这会以某种方式破坏您的嵌套结构,因此可能会增加在样式表中查找特定规则的工作量。
*:在 &
前面不允许使用除空格以外的其他字符。因此,您不能直接串联 selector
+&
- #id&
会引发错误。
如果是这种情况,我认为您需要使用更好的方法来创建类名或类名约定。例如,正如您所说,您希望 .container
类根据特定用途或外观具有不同的颜色。你可以这样做:
SCSS
.container {
background: red;
&--desc {
background: blue;
}
// or you can do a more specific name
&--blue {
background: blue;
}
&--red {
background: red;
}
}
CSS
.container {
background: red;
}
.container--desc {
background: blue;
}
.container--blue {
background: blue;
}
.container--red {
background: red;
}
上面的代码基于类命名约定中的 BEM Methodology。您可以查看此链接:BEM — Block Element Modifier Methodology
.container--desc
并最终没有结果时,您会感谢我的。
克里斯托夫的回答是完美的。但是,有时您可能想上更多的课而不是一门。在这种情况下,您可以尝试使用 &
使两个根类彼此相邻的 @at-root
和 #{}
css 功能。
这不起作用(由于 nothing before &
规则):
container {
background:red;
color:white;
.desc& {
background: blue;
}
.hello {
padding-left:50px;
}
}
但这会(使用 @at-root plus #{&}
):
container {
background:red;
color:white;
@at-root .desc#{&} {
background: blue;
}
.hello {
padding-left:50px;
}
}
使用&
SCSS
.container {
background:red;
color:white;
&.hello {
padding-left:50px;
}
}
https://sass-lang.com/documentation/style-rules/parent-selector
除了 Cristoph 的回答之外,如果您想在声明中更具体,您可以引用容器类组件的所有子组件。这可以通过以下方式完成:
.container {
// ...
#{&}.hello {
padding-left: 50px;
}
}
这编译为:
.container .container.hello {
padding-left: 50px;
}
我希望这对你有帮助!
这对我有用
<div class="container">
<div class="desc">
desc
</div>
<div class="asc">
asc
</div>
</div>
.container{
&.desc {
background: blue;
}
&.asc {
background: red;
}
}
不定期副业成功案例分享
&
的常见用途是在使用伪元素和伪类时。例如:&:hover
。&
,它将将该行放在所有其他级别的其余类的开头。您可以通过在.container
下执行&.desc
来组合元素,这会将 .desc 附加到它,从而产生.container.desc
::
用于伪元素。但是hover
是伪类,因此只能用一个冒号处理。