关键词：变量
不仅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的语法，这样就不用每次都去找命令行编译啦哈哈♪(∇*)
