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

作者：管理员 2020-12-01 16:56:44 分类：HTML/CSS 阅读（5146） 1

该篇幅不是主要硬核知识，更多的是让大家了解下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 */)
]
}
}]

参考

小结

经过一番梳理，会发现尽管 CSS 在社区的刺激下加快了更新迭代的速度，但是到目前为止，依然达不到 CSS 预处理器 VS CSS 的地步，只能说在使用 CSS 预处理器的同时，也可以在项目中尝试一些优秀的 CSS 新特性，即：CSS 预处理器 + CSS。

但是我依然坚信，在W3C的推动下，随着CSS自身不断完善，CSS预处理器终究会像当年的CoffeScript 、Jade一样，变成时代的过渡产物。到那时候，大家也就不用纠结各种CSS预处理器的环境配置和技术选型等，直接打开编辑器，就能愉快的书写样式。

本站所有文章、图片、资源等如无特殊说明或标注，均为来自互联网或者站长原创，版权归原作者所有；仅作为个人学习、研究以及欣赏！如若本站内容侵犯了原著者的合法权益，可联系我们进行处理，邮箱：343049466@qq.com

赞(0) 打赏

标签：

css变量

上一篇：利用Animation与Svg绘制loading/圆形进度条组件

下一篇：ES2018 新特性Promise.finally()是个啥你有了解吗？