關(guān)鍵詞：變量

不僅sass，less等可以使用變量，原生的css也是支持變量的，不知道大家有沒有用過

語法：var( <自定義屬性名> ,[<默認(rèn)值 ]? ) 默認(rèn)值可省略

   :root {
    --cl: #eee;
   }

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

此時(shí) #00BCD4不生效；

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

此時(shí) #00BCD4生效，因?yàn)樽兞繘]有定義

CSS變量不合法的缺省特性

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

會(huì)被這樣解析
* background-color: transparent;
CSS變量的空格尾隨特性

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

會(huì)被這樣解析
* font-size:20 px; //多了一個(gè)空格
但是我們可以這樣寫

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;
    }
}

通過變量，我們就完成了響應(yīng)式布局，是不是超級(jí)方便啊！！！
希望css能引進(jìn)更多sass，less的語法，這樣就不用每次都去找命令行編譯啦哈哈?(^?*)