如果你和我一样觉得 Sass 的 CSS 嵌套功能非常有用,那么你一定会很高兴地知道,我们的好日子就要来了。
因此,如果你不知道,Sass 的 CSS 嵌套功能允许您将 CSS 选择器嵌套在其他选择器中。例如,你可以这样写:
.parent {
.child {
color: red;
}
}
这将被编译成以下 CSS。
.parent .child {
color: red;
}
当你想为某一特定元素编写 CSS 时,如果该元素是另一元素的子元素,这就非常有用了。你不必反复编写父选择器。只需将子选择器嵌套在父选择器中就可以了。
原生 CSS 嵌套
现在,原生 CSS 也出现了类似的功能。CSS 嵌套模块[1]现已在 Safari 技术预览版 162 和 Chrome Dev 中附带(通过在浏览器中启用“Experimental Web Platform features(实验性 Web 平台功能)”标志)。
启用后,你可以像这样在原生 CSS 中编写上述类似 Sass 的代码。
.parent {
.child {
color: red;
}
#childWithId {
color: red;
}
}
很整洁,对吧?
但也有一些注意事项。
局限性
要使用 CSS 嵌套,你必须嵌套仅以以下符号开头的选择器:.、:、[、>、+、~、#、*。这是因为浏览器解析 CSS 的方式。如果你嵌套的选择器不以上述任何符号(例如 p、span、`div`` 等)开头,则嵌套将被忽略。
为了解决这个问题,你可以在子选择器前面添加 & ,如下所示。
.parent {
& span {
color: red;
}
}
上面的代码将被编译成下面的CSS。
.parent span {
color: red;
}
这也适用于如下场景。
ul {
padding-left: 1em;
}
.component ul {
padding-left: 0;
}
可以看出,这里的 ul 选择器并没有嵌套在 .component 选择器中。
要使 ul 选择器嵌套在 .component 选择器内,您可以将 & 附加到 .component 选择器,如下所示。
ul {
padding-left: 1em;
.component & {
padding-left: 0;
}
}
差不多就是这样了!
由于 CSS Nesting Module 仍处于草案阶段,因此不建议在生产中使用它。但很高兴知道,一旦该功能足够成熟,它就会出现在原生 CSS 中。
在此之前,您可以在支持的浏览器之一中对其进行测试,并在 bugs.webkit.org[2] 或 bugs.chromium.org[3] 上提交你的反馈或问题。
图片
Reference
[1]CSS 嵌套模块:https://drafts.csswg.org/css-nesting-1/
[2]bugs.webkit.org:http://bugs.webkit.org/
[3]bugs.chromium.org:https://bugs.chromium.org/p/chromium/issues/list