今天看了阮一峰老師的博客，看到一篇關於css變量的文章。。。自己在這邊整理一下。
1.聲明css變量：
body{
--foo: #7F583F;
--bar: #F7EFD2;
}
用--來聲明變量，原因很簡單因為$foo被sass用掉了，@foo被less用掉了，所以css變量聲明選擇--foo。
注意：變量只能用作屬性值，不能用作屬性名。如：--foo：margin-top； --foo：20px 錯誤！！！
2.var()函數：一個參數var(--foo)用於讀取變量的值；兩個參數 var （--foo，#456798）時，第二個參數為默認值，當變量不存在時，使用默認值。
注意：第二個參數不處理內部的逗號和空格：
var（--foo，“tom”，“jack”），tom和jack為var（）的第二個參數。
var（--foo，10px 20px 15px），同理10px 20px 15px為第二個參數。
3.變量值的類型：變量為字符串時可以與其他字符串拼接。
--bar ："hello";
--foo : var(--bar)" world";
變量為數值時不能與單位直接連用，需要用calc（）函數進行拼接
--foo：20；
margin-top：var（--foo）px //無效
margin-top：calc（var（--foo）*1px）； // 有效
變量帶有單位時，不能是字符串，寫成字符串無效。
/* 無效 */
.foo {
--foo: '20px';
font-size: var(--foo);
}
/* 有效 */
.foo {
--foo: 20px;
font-size: var(--foo);
}
4.變量的作用域：變量的作用域與css層疊樣式的規則一致
<style>
:root { --color: blue; }
div { --color: green; }
#alert { --color: red; }
* { color: var(--color); }
</style>
<p>blue</p>
<div>green</div>
<div id="alert">red</div>
全局變量通常放在 ：root {} 里面
基本的語法就這些，詳情請看：http://www.ruanyifeng.com/blog/2017/05/css-variables.html。