以上当屏幕宽度大于600px时，这三个元素都会相应的改变字体大小，使用这个可以和rem媲美。也许你还想给其中一个元素单独指定一个比--main-size大一点的字体，那我们可以结合使用calc函数，如下:

:root{ --main-size:12px; } .box{ font-size:var(--main-size); } .box2{ font-size:calc(var(--main-size) + 2px); } .box3{ font-size:var(--main-size); }

效果如图13.17

图13.17 单独设置某个样式

calc允许你使用计算功能，不过需要注意的是中间需要一个空格。

虽然以上只是几个很简单的例子，但这些也足以说明CSS变量是多么的重要，在以后的CSS写作中不要忘了使用它。

应用规则集(@apply)

我想你如果体验过组件化，那么你对@apply肯定会爱不释手，简单来说@apply可以实现更小的组合。如下：

:root{ --overflow-ellipsis:{ overflow:hidden; text-overflow: ellipsis; white-space: nowrap; }; } .title{ width:200px; @apply --overflow-ellipsis; }

在以上我们定义了一个用来实现当元素溢出时隐藏文字的代码段--overflow-ellipsis，当我们需要时只需要通过@apply来引用即可，真的是很实用的一个功能，不由想起来了Javascript中的函数。

如果某段代码是重复的，你不妨试试@apply。

未来的媒体查询 1.自定义媒体查询

使用自定义的媒体查询使之更加语义化，使用如下：

@custom-media --big-viewport (max-width:1100px); @media (--big-viewport) { body{ background-color:red; } }

通过@custom-media来设置一个媒体规则。感觉没什么用？好吧，来看下一个功能。

2.限制媒体查询范围

以前如果我们想实现一个限制媒体查询的范围也许是这样的：

@media (min-width: 320px) and (max-width: 640px) { body{ background-color:red; } }

以上我们限制屏幕的宽在320到640之间时让页面背景变成红色，但现在我们可以这样：

@media (width >= 320px) and (width <= 640px) { body{ background-color:red; } }

是不是更加一目了然了，当然它还可以结合@custom-media来使用，如下：

@custom-media --noly-mobile (width >= 320px) and (width <= 640px); @media (--noly-mobile) { body{ background-color:red; } } 自定义选择器

想过自己来定义选择器吗，接下来我们就来实现一个，如下：

@custom-selector :--title h2,h3; .main :--title{ font-size:18px; font-weight:normal; }

自定义选择器通过@custom-selector来定义，后面跟随一个:--接着是自定义选择器的名称，后面是你需要定义的选择器，多个用逗号隔开，如果你不理解的话，可以看下面这段代码，以上和下面这段代码效果是一样的。

.main h2, .main h3{ font-size:18px; font-weight:normal; }

要说，上面这两段代码的区别，可能就是自定义选择器更加灵活以及方便吧。

选择器嵌套

选择器嵌套是我非常喜欢的一个功能，话说当初我使用预处理器就是因为它有这个功能，小二来一段不加盐的代码：

div { & h2 { font-size:16px; &.title{ color:red; } & span{ color:pink; } } }

它的效果和下面这段代码一样：

div h2 { font-size: 16px } div h2.title { color: red } div h2 span { color: pink }

有没有一种再也不想用预处理器的冲动，另外对于媒体查询我们不需要用&来引用，直接在大括号中使用即可，如下：

div { @media (max-width:1100px) { background-color:red; } }

效果和下面这段代码一样：

@media (max-width:1100px) { div { background-color: red } }

它还支持比较复杂的嵌套（规则嵌套），如下这段：

a{ @nest p &{ color:red; } }

规则嵌套需要使用关键字@nest，效果和下面这段一样：

p a{ color: red } 颜色函数

颜色函数通过color使用，如下：

body{ background-color:color(pink a(30%)); }

这段代码的意思是说给body添加了一个背景为pink的颜色并且透明度为30%，和下面这段代码一样：

body{ background-color:rgba(255, 192, 203, 0.3); }

当然你也可以使用其它的颜色表示法，如:

body{ background-color:color(#666 a(30%)); }

这个还是比较方便的。

更多这方面的功能可以到https://drafts.csswg.org/css-color/#modifying-colors中查看。

初始值

我们知道一个div默认是块元素，那么如果你不想它默认变成块元素可以通过initial将它设置成初始值。如下：

div { display: initial; } <div>我才是真正的DIV，T_T</div> <div>我才是真正的DIV，T_T</div>

效果如图13.18所示

图13.18 初始值

这里它之所以在一排了，是因为display的初始值就是inline，而为什么不将div的display设置成initial它默认是block是因为浏览器给div设置了默认样式，也就是说initial可以去掉浏览器默认样式。

如果你想去掉一个元素中的所有浏览器默认样式，可以这样：

div{ all:initial; }

但不是特别建议你这样，最好还是根据需求来。

cssnext插件使用

cssnext插件允许你在CSS中写未来版本的CSS，它会将这些代码转换成浏览器兼容的代码，不过要使用cssnext我们还得下载一个postcss，那么postcss是什么呢？官方是这样说的：

使用JavaScript来转换CSS的工具

这里并不想详细的讲解postcss是什么，更多关于postcss的说明可以到官网查看，接下来我们来安装一下postcss

安装postcss-cli

npm install postcss-cli -g

下载完以后，我们接着下载cssnext如下：

npm install postcss postcss-cssnext -g