CSS變量:聲明全局變量，讓編寫更快捷 --root

在編寫css公共樣式的時候，我們都會聲明很多通用的顏色、字號等。現在我們可以通過聲明CSS變量來實現了

1.變量的聲明

CSS變量聲明是字母前加兩個橫線（--）如：

body{

　　--Colors:#dfdfdf;

　　--fS16px:16px;

}

上述代碼中，body選擇器中聲明了Colors和fS16px兩個變量。而使用‘--’是因為$被Sass占用了，@被Less占用了，所以是為了區分它們。

同時，你也可以用--root{}來存放所有變量，在下邊使用的時候直接調用即可。如：

--root{

　　--Colors:#dfdfdf;

　　--fS16px:16px;

}

變量的聲明對大小寫敏感。如：colors和Colors表示兩個不同的變量

2.var()函數

var函數用來讀取變量

a{
  color:var(--Colors)      
}

var()函數還可以使用第二個參數，表示變量的默認值。如果該變量不存在，就會使用這個默認值。

color: var(--Colors, #e5e5e5);

第二個參數不處理內部的逗號或空格，都視作參數的一部分。

var(--fontF, "Roboto", "Helvetica");
var(--Margins, 15px 20px 25px);

var()函數還可以用在變量聲明中

--root{
      --bgcolors:red;
      --fColor:var(--bgcolors)        
}

注意：變量只能作為屬性值，不能作為屬性名

3.變量值的類型

如果變量值是字符串，則可以與其他字符串拼接

--far:'hello';
--foo:var(--far)',world';

如果是數值，則不可以拼接

--far:20;
--foo:var(--far)'px'; //無效

但可以通過calc()函數，將他們拼接起來

--far:20;
--foo:calc(var(--far)*1px);

如果變量值帶單位，則不能寫成字符串形式

--far:'20px';
margin-top:var(--far); //無效

--far:20px;
margin-top:var(--far); //有效

4.作用域

<style>
  :root { --color: blue; }
  div { --color: green; }
  #alert { --color: red; }
  * { color: var(--color); }
</style>

<p>藍色</p>
<div>綠色</div>
<div id="alert">紅色</div>

上面代碼中，三個選擇器都聲明了--color變量。不同元素讀取這個變量的時候，會采用優先級最高的規則，因此三段文字的顏色是不一樣的。

這就是說，變量的作用域就是它所在的選擇器的有效范圍。

所以一些通用的變量值，最好聲明在--root{}內