还记得我们为什么使用SCSS/LESS等CSS预处理器吗？我想很大一部分人是因为变量和嵌套语法。变量让我们可以很方便的去管理整个系统（网站）中的主题；嵌套语法则可以让我们更好的去组织和编写CSS代码，且让我们的样式文件有了最初始的命名空间或者说是作用域的概念（我们可以把某个模块的代码都放在一个唯一的container当中，这个container就是一个作用域）。至于如条件语句/函数这些特性，如果你不是去开发如Bootstrap/Element-ui 等这些库的样式，在常规的项目编程中通常用到的很少。
2016年12月8日，《CSS揭秘》的作者 Lea Verou 调研了使用 CSS 预处理器的首要原因（单选题），有 1838 个人参与了投票，最终并列第一的两个理由是嵌套和变量。她觉得是时候该重新考虑 CSS 原生嵌套的问题了。
2017年CSS变量（也称为自定义属性）的规范被W3C批准，目前几乎所有的现代浏览器都支持CSS变量。而事实上目前几乎所有主流的库都在使用CSS变量来管理主题。本站也在很早之前就使用了CSS变量。
2023年，W3C为我们带来了CSS嵌套的规范。且截止目前，这一规范已经被诸多浏览器所引入和支持。就我个人而言，我觉得该规范引入的还是晚了点😂。
CSS嵌套是什么
CSS嵌套模块定义了嵌套选择器的语法，提供了将一个样式规则嵌套在另一个样式规则中的能力，以提高样式表的模块化和可维护性。
在嵌套之前，子选择器都要重复的声明父选择器，层级越深，声明越多。导致的结果就是样式重复，分散且代码里大（浏览器也要多加载一些字节）。
.button {
color: var(--theme-default);
}
.button.is-theme-primary {
color: var(--theme-primary);
}
.button.is-theme-success {
color: var(--theme-success);
}
.button.is-theme-error {
color: var(--theme-error);
}
而有了嵌套，选择器可以继续并且可以将与其相关的样式规则分组到其中。
.button {
color: var(--theme-default);
&.is-theme-primary {
color: var(--theme-primary);
}
&.is-theme-success {
color: var(--theme-success);
}
&.is-theme-error {
color: var(--theme-error);
}
}嵌套可以帮助我们更好的组织样式结构，减少重复选择器和最终文件的体积大小，同时还可以共同定位相关元素的样式规则。
如何使用
上面章节初步演示了CSS嵌套的使用方法，和SCSS等预处理大差不差。
嵌套规则可以使用嵌套选择器（&）来直接引用父规则的匹配元素，或者使用相对选择器语法指定“后代”以外的关系。
直接嵌套子选择器
.foo {
color: red;
.bar {
color: blue;
}
}
/* 相当于 */
.foo {
color: red;
}
.foo .bar {
color: blue;
}直接引用父规则
.foo {
color: red;
&:hover {
color: blue;
}
}
/* 相当于 */
.foo {
color: red;
}
.foo:hover {
color: blue;
}&和选择器之间无空格
本质上是用于覆盖原选择器的部分样式，比如给按钮添加不同的主题样式
/* --&和选择器之间无空格-- */
.foo {
color: red;
&.bar {
color: blue;
}
}
/* 相当于 */
.foo {
color: red;
}
.foo.bar {
color: blue;
}
/* html 这样使用
<span class="foo">foo</span>
<span class="foo bar">foo bar</span>
*/
<style>
:root {
--theme-default: #222;
--theme-primary: blue;
--theme-success: green;
--theme-error: red;
}
.button {
color: var(--theme-default);
&.is-theme-primary {
color: var(--theme-primary);
}
&.is-theme-success {
color: var(--theme-success);
}
&.is-theme-error {
color: var(--theme-error);
}
}
</style>
<button class="button">default</button>
<button class="button is-theme-primary">primary</button>
<button class="button is-theme-success">success</button>
<button class="button is-theme-error">error</button>&和选择器之间有空格
/* --&和选择器之间有空格-- */
.foo {
color: red;
& .bar {
color: blue;
}
}
/* 相当于 */
.foo {
color: red;
}
.foo .bar {
color: blue;
}⚠️这种规则无效
与SCSS/LESS等预处理器的异同
css嵌套模块和SCSS/LESS等预处理器的嵌套语法是相同的，也是不同的。
相同点
不同点
参考文档
-- EOF --
本文标题：浏览器环境下的文件读写
本文链接：https://smohan.net/blog/c1p2u9
本站使用「 署名-非商业性使用 4.0 国际 (CC BY-NC 4.0) 」创作共享协议，转载或使用请署名并注明出处。 相关说明 »
评论 「 ... 」