CSS中變量怎么用

小編給大家分享一下CSS中變量怎么用，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

成都創(chuàng)新互聯(lián)公司專業(yè)網(wǎng)站設(shè)計制作、成都網(wǎng)站建設(shè)，集網(wǎng)站策劃、網(wǎng)站設(shè)計、網(wǎng)站制作于一體，網(wǎng)站seo、網(wǎng)站優(yōu)化、網(wǎng)站營銷、軟文發(fā)布平臺等專業(yè)人才根據(jù)搜索規(guī)律編程設(shè)計，讓網(wǎng)站在運行后，在搜索中有好的表現(xiàn)，專業(yè)設(shè)計制作為您帶來效益的網(wǎng)站！讓網(wǎng)站建設(shè)為您創(chuàng)造效益。

一、變量的聲明

聲明變量的時候，變量名前面要加兩根連詞線（--）。

body{

--foo:#7F583F;

--bar:#F7EFD2;

}

上面代碼中，body選擇器里面聲明了兩個變量：--foo和--bar。

它們與color、font-size等正式屬性沒有什么不同，只是沒有默認(rèn)含義。所以CSS變量（CSSvariable）又叫做"CSS自定義屬性"（CSScustomproperties）。因為變量與自定義的CSS屬性其實是一回事。

你可能會問，為什么選擇兩根連詞線（--）表示變量？因為$foo被Sass用掉了，@foo被Less用掉了。為了不產(chǎn)生沖突，官方的CSS變量就改用兩根連詞線了。

各種值都可以放入CSS變量。

:root{

--main-color:#4d4e53;

--main-bg:rgb(255,255,255);

--logo-border-color:rebeccapurple;

--header-height:68px;

--content-padding:10px20px;

--base-line-height:1.428571429;

--transition-duration:.35s;

--external-link:"externallink";

--margin-top:calc(2vh+20px);

}

變量名大小寫敏感，--header-color和--Header-Color是兩個不同變量。

二、var()函數(shù)

var()函數(shù)用于讀取變量。

a{

color:var(--foo);

text-decoration-color:var(--bar);

}

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

color:var(--foo,#7F583F);

第二個參數(shù)不處理內(nèi)部的逗號或空格，都視作參數(shù)的一部分。

var(--font-stack,"Roboto","Helvetica");

var(--pad,10px15px20px);

var()函數(shù)還可以用在變量的聲明。

:root{

--primary-color:red;

--logo-text:var(--primary-color);

}

注意，變量值只能用作屬性值，不能用作屬性名。

.foo{

--side:margin-top;

/*無效*/

var(--side):20px;

}

上面代碼中，變量--side用作屬性名，這是無效的。

三、變量值的類型

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

--bar:'hello';

--foo:var(--bar)'world';

利用這一點，可以debug（例子）。

body:after{

content:'--screen-category:'var(--screen-category);

}

如果變量值是數(shù)值，不能與數(shù)值單位直接連用。

.foo{

--gap:20;

/*無效*/

margin-top:var(--gap)px;

}

上面代碼中，數(shù)值與單位直接寫在一起，這是無效的。必須使用calc()函數(shù)，將它們連接。

.foo{

--gap:20;

margin-top:calc(var(--gap)*1px);

}

如果變量值帶有單位，就不能寫成字符串。

/*無效*/

.foo{

--foo:'20px';

font-size:var(--foo);

}

/*有效*/

.foo{

--foo:20px;

font-size:var(--foo);

}

四、作用域

同一個CSS變量，可以在多個選擇器內(nèi)聲明。讀取的時候，優(yōu)先級最高的聲明生效。這與CSS的"層疊"（cascade）規(guī)則是一致的。

下面是一個例子。

<style>

:root{--color:blue;}

p{--color:green;}

#alert{--color:red;}

*{color:var(--color);}</style><p>藍(lán)色</p><p>綠色</p><pid="alert">紅色</p>

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

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

body{

--foo:#7F583F;

}

.content{

--bar:#F7EFD2;

}

上面代碼中，變量--foo的作用域是body選擇器的生效范圍，--bar的作用域是.content選擇器的生效范圍。

由于這個原因，全局的變量通常放在根元素:root里面，確保任何選擇器都可以讀取它們。

:root{

--main-color:#06c;

}

五、響應(yīng)式布局

CSS是動態(tài)的，頁面的任何變化，都會導(dǎo)致采用的規(guī)則變化。

利用這個特點，可以在響應(yīng)式布局的media命令里面聲明變量，使得不同的屏幕寬度有不同的變量值。

body{

--primary:#7F583F;

--secondary:#F7EFD2;

}

a{

color:var(--primary);

text-decoration-color:var(--secondary);

}

@mediascreenand(min-width:768px){

body{

--primary:#F7EFD2;

--secondary:#7F583F;

}

}

六、兼容性處理

對于不支持CSS變量的瀏覽器，可以采用下面的寫法。

a{

color:#7F583F;

color:var(--primary);

}

也可以使用@support命令進(jìn)行檢測。

@supports((--a:0)){

/*supported*/

}

@supports(not(--a:0)){

/*notsupported*/

}

七、JavaScript操作

JavaScript也可以檢測瀏覽器是否支持CSS變量。

constisSupported=

window.CSS&&

window.CSS.supports&&

window.CSS.supports('--a',0);

if(isSupported){

/*supported*/

}else{

/*notsupported*/

}

JavaScript操作CSS變量的寫法如下。

//設(shè)置變量

document.body.style.setProperty('--primary','#7F583F');

//讀取變量

document.body.style.getPropertyValue('--primary').trim();

//'#7F583F'

//刪除變量

document.body.style.removeProperty('--primary');

這意味著，JavaScript可以將任意值存入樣式表。下面是一個監(jiān)聽事件的例子，事件信息被存入CSS變量。

constdocStyle=document.documentElement.style;

document.addEventListener('mousemove',(e)=>{

docStyle.setProperty('--mouse-x',e.clientX);

docStyle.setProperty('--mouse-y',e.clientY);

});

那些對CSS無用的信息，也可以放入CSS變量。

--foo:if(x>5)this.width=10;

上面代碼中，--foo的值在CSS里面是無效語句，但是可以被JavaScript讀取。這意味著，可以把樣式設(shè)置寫在CSS變量中，讓JavaScript讀取。

所以，CSS變量提供了JavaScript與CSS通信的一種途徑。

以上是“CSS中變量怎么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

當(dāng)前名稱：CSS中變量怎么用
網(wǎng)站路徑：http://www.muchs.cn/article42/phdoec.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站制作、企業(yè)建站、網(wǎng)站改版、定制開發(fā)、手機網(wǎng)站建設(shè)、網(wǎng)站排名

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

商城網(wǎng)站建設(shè)