溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶(hù)服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇“CSS3的變量var怎么用”文章的知識(shí)點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來(lái)看看這篇“CSS3的變量var怎么用”文章吧。
在任何語(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中原生的變量定義語(yǔ)法是：--*，變量使用語(yǔ)法是：var(--*)，其中*表示我們的變量名稱(chēng)。關(guān)于命名這個(gè)東西，各種語(yǔ)言都有些顯示，例如CSS選擇器不能是數(shù)字開(kāi)頭，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));
}所以，我們就可以直接使用中文名稱(chēng)作為變量，即使英語(yǔ)4級(jí)沒(méi)過(guò)的小伙伴也不會(huì)有壓力了，我們也不需要隨時(shí)掛個(gè)翻譯器在身邊了。
無(wú)論是變量的定義和使用只能在聲明塊{}里面，例如，下面這樣是無(wú)效的：
--深藍(lán): #369;
body {
background-color: var(--深藍(lán));
}變量的定義，或者說(shuō)聲明跟CSS計(jì)數(shù)器的聲明類(lèi)似的，你應(yīng)該擺脫Sass/Less等預(yù)編譯工具語(yǔ)法先入為主的語(yǔ)法影響，把CSS的原生變量理解為一種CSS屬性。
這樣，你就對(duì)其權(quán)重和變量應(yīng)用規(guī)則要容易理解地多。
例如下面這個(gè)例子：
:root { --color: purple; }div { --color: green; }#alert { --color: red; }* { color: var(--color); }<p>我的紫色繼承于根元素</p>
<div>我的綠色來(lái)自直接設(shè)置</div>
<div id='alert'> ID選擇器權(quán)重更高，因此阿拉是紅色！
<p>我也是紅色，占了繼承的光</p>
</div>上面這個(gè)例子我們可以獲得這些信息：
變量也是跟著CSS選擇器走的，如果變量所在的選擇器和使用變量的元素沒(méi)有交集，是沒(méi)有效果的。例如#alert定義的變量，只有id為alert的元素才能享有。如果你想變量全局使用，則你可以設(shè)置在:root選擇器上；
當(dāng)存在多個(gè)同樣名稱(chēng)的變量時(shí)候，變量的覆蓋規(guī)則由CSS選擇器的權(quán)重決定的，但并無(wú)!important這種用法，因?yàn)闆](méi)有必要，!important設(shè)計(jì)初衷是干掉JS的style設(shè)置，但對(duì)于變量的定義則沒(méi)有這樣的需求。
類(lèi)似下面這樣：
body {
--bc: background-color;
var(--bc): #369;
}答案是“不可以”，要是可以支持的話，那CSS的壓縮可就要逆天了，估計(jì)所有的屬性都會(huì)變成1~2個(gè)字符。
類(lèi)似下面這樣：
…
不好意思，類(lèi)似不了，語(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：
請(qǐng)看下面這個(gè)例子：
body {
--color: 20px;
background-color: #369;
background-color: var(--color, #cd0000);
}請(qǐng)問(wèn)，此時(shí)<body>的背景色是？
A. transparent B. 20px C. #369 D. #cd0000
答案是…………………………A. transparent
不知大家答對(duì)了沒(méi)有！
這是CSS變量非常有意思的一個(gè)點(diǎn)，對(duì)于CSS變量，只要語(yǔ)法是正確的，就算變量里面的值是個(gè)亂七八糟的東西，也是會(huì)作為正常的聲明解析，如果發(fā)現(xiàn)變量值是不合法的，例如上面背景色顯然不能是20px，則使用背景色的缺省值，也就是默認(rèn)值代替，于是，上面CSS等同于：
body {
--color: 20px;
background-color: #369;
background-color: transparent;
}
千萬(wàn)不能想當(dāng)然得認(rèn)為等同于background-color:20px，這也是為什么上面要強(qiáng)調(diào)CSS默認(rèn)值的使用僅限于變量未定義的情況，并不包括變量不合法。
請(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);
}此時(shí)，<body>的font-size大小才是20px，
就是說(shuō)，我們?cè)贑SS變量定義的時(shí)候可以直接引入其他變量給自己使用，例如：
body {
--green: #4CAF50;
--backgroundColor: var(--green);
}或者更復(fù)雜的使用CSS3 calc()計(jì)算，例如：
body {
--columns: 4;
--margins: calc(24px / var(--columns));
}對(duì)于復(fù)雜布局，CSS變量的這種相互傳遞和直接引用特性可以簡(jiǎn)化我們的代碼和實(shí)現(xiàn)成本，尤其和動(dòng)態(tài)布局在一起的時(shí)候，無(wú)論是CSS的響應(yīng)式后者是JS驅(qū)動(dòng)的布局變化。
我們來(lái)看一個(gè)CSS變量與響應(yīng)式布局的例子，您可以狠狠地點(diǎn)擊這里：CSS變量與響應(yīng)式布局實(shí)例demo
默認(rèn)進(jìn)去是4欄，如下圖：
隨著瀏覽器寬度減小，4欄可能就變成3欄，2欄甚至1欄，我們實(shí)際開(kāi)發(fā)的時(shí)候，顯然不僅僅是欄目數(shù)量變化，寬度小，往往意味著訪問(wèn)設(shè)備尺寸有限，此時(shí)我們往往會(huì)縮小空白間距以及文字字號(hào)大小，這樣，有限屏幕才能顯示更多內(nèi)容。
也就是說(shuō)，當(dāng)我們響應(yīng)式變化的時(shí)候，改變的CSS屬性值不是1個(gè)，而是3個(gè)或者更多，如果我們有3個(gè)響應(yīng)點(diǎn)，是不是就至少需要9個(gè)CSS聲明？但是，由于我們有了CSS變量，同時(shí)，CSS變量可以傳遞，當(dāng)我們?cè)庥鲰憫?yīng)點(diǎn)的時(shí)候，我們只需要改變一個(gè)CSS屬性值就可以了。
下面就是本demo核心CSS代碼（只需要改變--columns這一個(gè)變量即可）：
.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;
}
}于是，我們?cè)?欄下的效果就是這樣，字號(hào)，間距隨著欄目數(shù)量的減小也一并減小了，然后每欄之間間距是擴(kuò)大了：
以上就是關(guān)于“CSS3的變量var怎么用”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對(duì)大家有幫助，若想了解更多相關(guān)的知識(shí)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼