原生css变量声明

噫~~~

我为什么要用原生css这个名词啊，管他呢。我发现了一个不得了的东西，接触前端都有一年多的时间了，今天才知道原生css也可以变量声明这个黑科技啊。我是不是和时代脱轨太长时间了。好了，来吧，介绍一下这个东东。统计一下，知道这个东西的同学请在下方评论打1

定义css变量

我们都知道使用less或者sass这些预处理语言，可以做到变量声明，下面举个例子，声明一个颜色是白色的变量,变量名是mio

1. less

   @mio : #fff;div{    color : @mio;}

2. sass

   $mio : #fff;div{    color : $mio;}

3. css

   *{    --mio : #fff;}div{    color : var(--mio);}

   注意css的写法，声明变量必须写在选择器里面，变量名用--定义。

用处

结合变量声明这个功能，可以做到定义全局的公共样式，比如主题色，比如官方板块间距，比如移动端适配不同屏幕页面的排版方式之类的。

我们再结合css3提供的cacl()计算属性，这个属性支持四则运算，支持的单位有rem,em,%,px,使用时在运算符号两边加空格。举个例子：

:root{    --cellwidth:200px;    --cellheight: calc(var(--cellwidth) / 4);}div{    width: var(--cellwidth);    height: var(--cellheight);    line-height: var(--cellheight);    margin-top: calc(var(--cellwidth) - var(--cellheight) + 2px);}

这段代码计算的div，宽200px，高50px，行高50px，margin-top是52px运行后的结果：

妈耶，太厉害了，css越来越厉害了