前端乾貨：CSS3 var變量

CSS HTML 易語言 Safari 設計 Chrome iOS opera瀏覽器 Firefox 編程語言 IT學堂 2019-05-30

在正文開始前，小編想說一句：今天合肥由於大風，霧霾都吹走了，天特別藍，早上騎車上班，颶風拂面，酸爽！

好了，廢話完了，我們今天來說一說CSS3變量。

貌似在任何編程語言中，都離不開變量，變量的好處，如提高性能、易維護等我就不多說了。CSS預編譯工具Sass/Less/Stylus等，也早就推出了變量。CSS3不負眾望，也推出了自己的變量，雖然寫法和平時我們寫其他語言不太一樣，但是，也很好理解。

首先，我們看下兼容性吧，如果兼容性很差，那都是扯淡：

css3 var兼容性

		Firefox：49+
		Chrome：49+
		Safari：9.1+
		Opera：41+
		IOS Safari：9.3+

怎麼沒有IE呢，非常抱歉，IE11還不支持，不知道後面的版本怎麼樣，您可以自己回去測。但是已經很不錯了，至少開發手機站和混合APP沒多大問題了！

第二，CSS3變量語法：

專業表達：var( [, ]? )

換做人話是這麼說的：var( <自定義屬性名> [, <默認值 ]? )

簡單描述下：var你就把它看成js的函數，括號裡是傳參，第一個參數必傳，傳的是你自定義的變量名，第二個參數是選填，即這個變量名的默認值，函數的返回值就是參數變量的值。

如默認值的用法：

div{
	background-color: var(--bg,red);
}

由於並沒有定義--bg這個變量，這個div最終背景色為red。

第三，變量的寫法：

--*，語法是：var(--*)，其中 * 表示我們的變量名。

注：
1、變量必須以--開頭，如 --bg、--color等。
2、變量的命名規則：不能包含如"$"，"["，"^"，"("，"%"等特殊字符，僅限於“數字[0-9]”，“字母[a-zA-Z]”，“下劃線_”，“短橫線-”組合，此外，也可以是中文、韓文、日文等（易語言？你們還想到什麼語言用中文來寫，在下面評論，讓小編也漲漲見識）。

第四：我們通過例子來了解css3變量的一些用法

例1：英文和中文命名

div{
	--color: #f00;
	--藍色: #00f;
	background-color: var(--藍色);
	color: var(--color);
}

例2：數字命名

:root {
	--1: #369;
}
body {
	background-color: var(--1);
}

變量名以數字開頭，很奇怪對吧，css的class和id不能，js的變量也不能，但是css變量卻能！

此外，這裡給root定義變量，卻在body使用，是因為root包含body，這點很重要。

例3：變量名必須包含在花括號內

--深藍: #369;
body {
	background-color: var(--深藍);
}

這裡的變量“--深藍”在花括號之外，所以無效。

例4、權重、繼承性、範圍性（摘自網上的一個例子）：

css：

<style type="text/css">
 :root { --color: purple; }
 div { --color: green; }
 #alert { --color: red; border:1px solid #000;}
 * { color: var(--color); }
</style>

html：

<p>p標籤文字顏色：紫色</p>
<div>div標籤文字顏色：綠色</div>
<div id='alert'>
 ID選擇器權重更高，因此文字顏色是紅色！
 <p>我也是紅色，佔了繼承的光</p>
</div>

最終效果圖：

css3 var 案例

說明：

變量也是跟著CSS選擇器走的，如果變量所在的選擇器和使用變量的元素沒有交集，是沒有效果的。例如#alert定義的變量，只有id為alert的元素才能享有。如果你想變量全局使用，則你可以設置在:root選擇器上；

當存在多個同樣名稱的變量時候，變量的覆蓋規則由CSS選擇器的權重決定的，但並無!important這種用法，因為沒有必要，!important設計初衷是幹掉JS的style設置，但對於變量的定義則沒有這樣的需求。

例5：值的合法性及缺省值

div{
 --color: 20px;
 background-color: var(--color, #cd0000);
}

上面這個div最終顏色為透明，因為雖然設置了變量名的默認值為#cd0000，但是前面定義了變量--color，而--color的值是不合法的顏色值，最終用缺省值代替，div的缺省值，就是透明。

例6：既然CSS屬性值可以用變量，屬性名可以用麼？

body {
 --bc: background-color; 
 var(--bc): #369;
}

結果無效，屬性名不能用變量替代。

例7，CSS3變量的傳遞性：

div{
	--green: #4CAF50; 
	--bg: var(--green);
	background-color: var(--bg);
}

這裡將變量--green的值賦給了--bg，最後再把變量--bg的值賦給css屬性名background-color

例8，除上面的例子，在前端乾貨：利用css3編寫一個炫酷的波浪效果loading動畫這篇文章也用到了CSS3變量，這是真實的實戰，可以去看看。

第五：js獲取和設置CSS變量，與獲取普通css屬性一致：

html:

<div id="cssVar"></div>

css:

#cssVar{
 --my-width: 200px;
 width:var(--my-width);
}

js:

var el = document.querySelector('#cssVar');
//GET獲取
var curWidth = getComputedStyle(el).getPropertyValue("--my-width");
console.log(curWidth); //200px
//SET設置
el.style.setProperty("--my-width", '300px');

最後，來看個利用CSS3變量編寫的響應式效果：

html：

<h1>CSS3變量編寫的響應式效果</h1>
<div class="container">
 <div class="item item1">1</div>
 <div class="item item2">2</div>
 <div class="item item3">3</div>
 <div class="item item4">4</div>
</div>

css：

*{padding:0;margin:0;}
:root {
 --font-size: 30px;
 --width:20%;
 --margin:15px 2.5%;
}
.container{display: flex; flex-wrap: wrap;}
h1{text-align: center;}
h1,.item{font-size: var(--font-size);}
.item{
 text-align: center;
 font-size:20px;
 color:#fff;
 height:40px;
 line-height: 40px;
 margin:var(--margin);
 width:var(--width);
 flex-shrink: 0
}
.item1{background:#acf4b6;}
.item2{background:#ffe975;}
.item3{background:#5efffa;}
.item4{background:#e6b4fd;}
@media screen and (max-width: 700px) {
 :root {
 --font-size: 20px;
 --width:45%;
 --margin:10px 2.5%;
 }
}
@media screen and (max-width: 500px) {
 :root {
 --font-size: 14px;
 --width:100%;
 --margin:0 0%;
 }
}

瀏覽器寬度700以上的效果：

瀏覽器寬度500-700以上的效果：

瀏覽器寬度500以下的效果：

以往，我們可能要單獨在每個適配寬度下，調整標題大小，item的相關尺寸等，現在，定義成變量，在適配寬度的時候，只要調整變量就可以了，大大節省了代碼量，且便於維護。

好了，今天的乾貨就到這裡了，歡迎在下方留言評論本文的不足之處！關注IT學堂，獲取更多幹貨哦！