CSS的未来

仅供参考

前言

完成《CSS核心技术与实战》这本书，已有一个多月了，而这篇文章原本是打算写在那本书里面的，但本章讲解的内容，毕竟属于CSS未来的范畴，而这一切都还不能够确定下来，所以这一章没有写进去，但不管怎么说，多少了解一下还是有好处的，里面部分功能，有些浏览器已经实现了。

如果你对CSS预处理器感兴趣，那么本篇文章也许很适合你。

初学CSS预处理器，其实我是不太明白为什么需要用这种东西的，后来想明白一件事，一切都是为了可维护性。比如下面这幅图

距离左边有一点点间距，而其他元素设置的间距往往也是一样的，但如果不使用预处理器，或许我们会这样写

.box{ padding:12px; } .footer{ padding:12px; } ....{ padding:12px; }

但这种问题是，如果需要更改所有间距，你不得不诶个去替换，这样带来了很多不必要的工作量，如果使用预处理器就好办了，因为预处理器是允许你使用变量的，你可以像编程语言那样，定义一个全局变量，在需要的地方，引用这个全局变量，更改的时候，只需要修改一处就好了，假设代码如下:

var pad = 12px; .box{ padding:pad; } .footer{ padding:pad; }

也就是说预处理器很大一部分就是为了解决可维护性，本章讲解的是后处理器。

那么后处理器和预处理器有什么区别

你可以这样理解，后处理器就好比动态语言，而预处理器就好比静态语言。预处理器就是事先将结果编译出来，而后处理器则不同，值是在运行时才决定的。

CSS的未来

在未来的CSS中将会支持更多的属性以及函数，其中不乏有变量，嵌套，值计算等，这一章我们将会讲解它们。

注意：因为本节内容大部分需要CSS未来版本才支持，所以你的浏览器可能不一定有效果，不过有一个插件(cssnext)可以解决这个问题，关于这个插件的使用请到本节的最后一节中查看。

CSS变量 1. 变量的基本使用

在这些新增的功能中最喜欢的非CSS变量莫属，CSS变量名通过自定义属性来设置（要实现全局变量，需要在html或body也可以在:root伪类中声明），并且自定义属性必须以--开头,使用var()来访问。如下：

:root{ --colorRed:red; --size:16px; --h:35px; --l-h:35px; } a{ display:block; height:var(--h); line-height:var(--l-h); color:var(--colorRed); font-size:var(--size); outline:1px solid #666; }

效果如图13.11

图13.11 变量

以上我们通过:root在全局中定义了几个变量，然后在a元素中通过var函数来使用这些变量。

需要注意的是这些变量对大小写是敏感的，如：--color和--Color是两个不同的变量。

另外这些变量也是可以继承的，如下这段：

:root{ --color-red:red; } .box{ color:var(--color-red); } <div class="box"> <p>CSS变量</p> </div>

效果如图13.12

图13.12 继承

这些变量也具有层叠性，如下这段代码：

:root{ --head-color:red; } .box{ --head-color:blue; } .box p{ color:var(--head-color); }

如上这段，我们在全局声明了一个--head-color在.box中又声明了一次，那么它最终会使用的是它父元素中定义的--head-color，就近原则，效果如图13.13

图13.13 变量也具有层叠性

不过还得注意一下就是这些变量不支持!important，也就是说设置了和没设置是一样的，根本没用，如下：

:root{ --head-color:red !important; } .box{ color:var(--head-color); } .box{ color:blue; } <div class="box">CSS变量</div>

效果如图13.14

图13.14 变量不支持!important

看到了吧，虽然我们给--head-color设置了!important但还是被层叠了，如果是正常情况应该会像下面这段代码一样：

.box{ color:red !important; } .box{ color:blue; }

效果如图13.15

图13.15 如果可以的话应该是这个样子

这个var函数还支持一个很强大的功能，允许你传递一个默认的参数，当变量不存在的时候就会使用默认值，如下：

:root{ /*--head-color:red;*/ } .box{ color:var(--head-color,orange); }

以上我们在var中使用了一个默认的值，当--head-color不存在就会使用orange，效果如图13.16

图13.16 使用默认值

2.CSS变量的意义

如果你使用过一些编程语言，你不会忘记变量是多么的重要，如在Javascript中，我们经常会写这样一段代码：

var oBox = document.getElementById('box'); oBox.style.width = '100px'; oBox.style.height = '100px'; oBox.style.backgroundColor = 'red';

在这段代码中我们通过oBox变量来引用.box元素，在下次的使用中就不需要重新去获取这个元素了，这样给我们带来了很大的便利。在CSS中变量也同样重要，不然你让Less、Sass等预处理情何以堪，正是因为它们支持在CSS中像编程语言一样编程，所以在之前的很长一段时间里它们是那样的让人着迷。在CSS中合理的使用变量，可以减轻不少的工作，以及可维护性。比如一个网站的主调色，它们基本都是固定的，那么我们完全可以使用变量来储存它们，另外一点就是当网站改版时，如果网站主调色改变时我们只需要改变相应的变量即可，这或许就是变量的最大好处吧。从另一个角度来讲使用变量的另一个好处就是，具有一致性，比如页面中所有元素的字体大小都是引用的同一个变量，那么当我们改变这个变量时，其他元素的字体大小都会相应的改变，我们来看一下，下面这段代码：

:root{ --main-size:12px; } .box{ font-size:var(--main-size); } .box2{ font-size:var(--main-size); } .box3{ font-size:var(--main-size); } @media screen and (min-width:600px){ :root{ --main-size:16px; } }