了解CSS/CSS3原生变量var (转)
一、變量是個(gè)好東西
在任何語(yǔ)言中，變量的有一點(diǎn)作用都是一樣的，那就是可以降低維護(hù)成本，附帶還有更高性能，文件更高壓縮率的好處。
隨著CSS預(yù)編譯工具Sass/Less/Stylus的關(guān)注和逐漸流行，CSS工作組迅速跟進(jìn)CSS變量的規(guī)范制定，并且，很多瀏覽器已經(jīng)跟進(jìn)，目前，在部分項(xiàng)目中已經(jīng)可以直接使用了。
?
?
Chrome/Firefox/Safari瀏覽器都是綠油油的，兼容性大大超出我的預(yù)期，于是果斷嘗鮮記錄下語(yǔ)法用法和特性。
二、CSS變量var()語(yǔ)法和用法和特性
CSS中原生的變量定義語(yǔ)法是：--*，變量使用語(yǔ)法是：var(--*)，其中*表示我們的變量名稱。關(guān)于命名這個(gè)東西，各種語(yǔ)言都有些顯示，例如CSS選擇器不能是數(shù)字開頭，JS中的變量是不能直接數(shù)值的，但是，在CSS變量中，這些限制通通沒(méi)有，例如：
:root {--1: #369;
}
body {background-color: var(--1);
}
結(jié)果背景色如下：
?
但是，不能包含$，[，^，(，%等字符，普通字符局限在只要是“數(shù)字[0-9]”“字母[a-zA-Z]”“下劃線_”和“短橫線-”這些組合，但是可以是中文，日文或者韓文，例如：
body {--深藍(lán): #369;background-color: var(--深藍(lán));
}
所以，我們就可以直接使用中文名稱作為變量，即使英語(yǔ)4級(jí)沒(méi)過(guò)的小伙伴也不會(huì)有壓力了，我們也不需要隨時(shí)掛個(gè)翻譯器在身邊了。
無(wú)論是變量的定義和使用只能在聲明塊{}里面，例如，下面這樣是無(wú)效的：
?
--深藍(lán): #369;
body {background-color: var(--深藍(lán));
}
CSS屬性名可以走變量嗎？
類似下面這樣：
body {--bc: background-color; var(--bc): #369;
}
答案是“不可以”，要是可以支持的話，那CSS的壓縮可就要逆天了，估計(jì)所有的屬性都會(huì)變成1~2個(gè)字符。
CSS變量支持同時(shí)多個(gè)聲明嗎？
類似下面這樣：
…
不好意思，類似不了，語(yǔ)法上就根本不支持。
CSS變量使用完整語(yǔ)法
CSS變量使用的完整語(yǔ)法為：var(?[,?]? )，用中文表示就是：var( <自定義屬性名> [, <默認(rèn)值 ]? )，
意思就是，如果我們使用的變量沒(méi)有定義（注意，僅限于沒(méi)有定義），則使用后面的值作為元素的屬性值。舉個(gè)例子：
.box {--1: #369;
}
body {background-color: var(--1, #cd0000);
}
則此時(shí)的背景色是#cd0000：
?
CSS變量的空格尾隨特性
請(qǐng)看下面這個(gè)例子：
body {--size: 20; font-size: var(--size)px;
}
請(qǐng)問(wèn)，此時(shí)<body>的font-size大小是多少？
如果你以為是20px就太天真了，實(shí)際上，此處font-size:var(--size)px等同于font-size:20 px，注意，20后面有個(gè)空格，所以，這里的font-size使用的是<body>元素默認(rèn)的大小。因此，就不要妄圖取消就使用一個(gè)數(shù)值來(lái)貫穿全場(chǎng)，還是使用穩(wěn)妥的做法：
body {--size: 20px; font-size: var(--size);
}
或者使用CSS3?calc()計(jì)算：
body {--size: 20; font-size: calc(var(--size) * 1px);
}
轉(zhuǎn)載于:https://www.cnblogs.com/caonima-666/p/6756277.html
總結(jié)
以上是生活随笔為你收集整理的了解CSS/CSS3原生变量var (转)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： SpringMVC的form：form表
- 下一篇： python基础——继承与派生、组合