CSS变量

关键词：变量

不仅sass，less等可以使用变量，原生的css也是支持变量的，不知道大家有没有用过

语法：var( <自定义属性名> ,[<默认值 ]? ) 默认值可省略

   :root {
    --cl: #eee;
   }

   body {
     background-color: var(--cl,  #00BCD4);
   }

此时 #00BCD4不生效；

   .box{
    --in: #ccc;
   }
   body {
     background-color: var(--in,  #00BCD4);
   }

此时 #00BCD4生效，因为变量没有定义

CSS变量不合法的缺省特性

body {
  --color: 20px;
  background-color: #369;
  background-color: var(--color, #300);  // 不合法，背景变透明
}

会被这样解析
* background-color: transparent;
CSS变量的空格尾随特性

body {
  --size: 20;   
  font-size: var(--size)px;  // 不合法，无效
}

会被这样解析
* font-size:20 px; //多了一个空格
但是我们可以这样写

body {
  --size: 20;   
  font-size: calc(var(--size) * 1px);  // 合法
}

小demo

.box {
    --columns: 4;
    --margins: calc(24px / var(--columns));
    --space: calc(4px * var(--columns));
    --fontSize: calc(20px - 4 / var(--columns));
}
@media screen and (max-width: 1200px) {
    .box {
        --columns: 3;
    }
}
@media screen and (max-width: 900px) {
    .box {
        --columns: 2;
    }
}
@media screen and (max-width: 600px) {
    .box {
        --columns: 1;
    }
}

通过变量，我们就完成了响应式布局，是不是超级方便啊！！！
希望css能引进更多sass，less的语法，这样就不用每次都去找命令行编译啦哈哈♪(^∇*)