原生css变量声明

原生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越来越厉害了