前端黑科技:root之CSS变量var，从此Sass/Less是弟弟（下篇）

2020-12-01 分类：HTML/CSS 作者：管理员阅读（2931）

该篇幅不是主要硬核知识，更多的是让大家了解下CSS近年来一些发展以及对未来的一些展望，如果想了解关于CSS变量硬核技术篇可阅读前端黑科技:root之CSS变量var，从此Sass/Less是弟弟（上篇）。众所周知，平时在使用sass和less主要使用的功能有哪些？那莫过于变量（variables），代码混合（ mixins），嵌套（nested rules）以及代码模块化(Modules)。其实原生css近些年也在尝试不断突破自己，CSS这些年做了啥？

Mixins in CSS

CSS 的有一个提案：CSS @apply Rule，按照该草案描述，用户可直接使用 CSS 变量存放声明块，然后通过 @apply rule 使用。

1
2
3
4
5
6
7
8
9
10

:root {
--pink-schema: {
color: #6A8759;
background-color: #F64778;
}
}

body{
@apply --pink-schema;
}

可惜这个提案已被废弃，具体废弃原因感兴趣的可以看看这篇文章：Why I Abandoned @apply。尽管 Mixins 现在 CSS 还没有好的实现标准，但我们坚信迟早会有更优秀的规范涌现出来弥补 CSS 的这一块空白。

Nesting in CSS

CSS 里已经有 Nesting 的规范出现，尽管现在只处于 Editor’s Draft 阶段：CSS Nesting Module Level 3，可以看到按照 CSS Nesting Module ，Nesting 规范基本和预处理器（sass/less）一模一样。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

/* Dropdown menu on hover */
ul {
/* direct nesting (& MUST be the first part of selector)*/
& > li {
color: #000;

& > ul { display: none; }

&:hover {
color: #f00;

& > ul { display: block; }
}
}
}

Module in CSS

其实 CSS 很早就有了模块化方案，那就是 @import，使用 CSS 的 @import 规则，可以引用其他的文件样式。这个特性从 IE 5.5 开始就被所有的浏览器支持，那为什么一直以来使用者寥寥无几呢，原因很多：

在一些老的浏览器有加载顺序的 bug
无法并行加载
导致过多的请求数量
……

不过现在大家的前端项目基本都会使用构建工具（Gulp、Webpack 等）打包后再上线，因此以上哪些缺点也就不存在了，而在 Webpack 的 css-loader 中，是可以配置是否开启 @import 的。

Selector Helpers

如果你还觉得也不过如此，无非是做着预解析早已做过的前人之事，那你继续往后看，除了上面介绍的一些主要特性，CSS 还提供了一些全新的特性来帮助你更优雅的书写样式。

:matches()

1 2	/* 语法 / :matches( selector[, selector] )

1
2
3
4
5
6
7
8
9
10
11

.nav:matches(.side,.top) .links:matches(:hover, :focus) {
color: #BADA55;
}

/* 相当于以下代码 */
.nav.side .links:hover,
.nav.top .links:hover,
.nav.side .links:focus,
.nav.top .links:focus {
color: #BADA55;
}

:matches() CSS 伪类函数将选择器列表作为参数，并选择该列表中任意一个选择器可以选择的元素，这对于以更紧凑的形式编写大型选择器非常有用，而且浏览器支持程度也已经接近 93%。想要了解更多详情可以查看规范：Selectors Level 4

@custom-selector

同时，你还可以您可以使用自定义选择器来定义可以匹配复杂选择器的别名。

1 2	/* 语法 */ @custom-selector: <custom-selector> <selector-list>;

定义的方式和 CSS 变量类似，使用起来稍微有点区别。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

@custom-selector :--text-inputs input[type="text"],
input[type="password"];

:--text-inputs.disabled,
:--text-inputs[disabled] {
opacity: 0.5
}

/* 相当于以下代码 */
input[type="text"].disabled,
input[type="password"].disabled,
input[type="text"][disabled],
input[type="password"][disabled] {
opacity: 0.5
}

尽管上述的 CSS 特性还处于不同阶段，浏览器的支持程度也不尽相同，但是使用postcss-preset-env，你就可以抢先尝试 CSS 的最新特性。当然，postcss-preset-env 的配置也十分简单，以 Webpack 为例：

1
2
3
4
5
6
7
8
9
10
11
12
13

rules:[ {
test:/\.css$/,use:[
'style-loader' {
loader:'css-loader',options: {
importLoaders:1
}
} {
loader:'postcss-loader',options: {
ident:'postcss',plugins:() => [
postcssPresetEnv(/* pluginOptions */)
]
}
}]