CSS中變量怎么用

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

　　一、變量的聲明

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

　　body{

　　--foo:#7F583F;

　　--bar:#F7EFD2;

　　}

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

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

　　你可能會(huì)問(wèn)，為什么選擇兩根連詞線（--）表示變量？因?yàn)?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);

　　}

　　變量名大小寫(xiě)敏感，--header-color和--Header-Color是兩個(gè)不同變量。

　　二、var()函數(shù)

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

　　a{

　　color:var(--foo);

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

　　}

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

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

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

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

　　var(--pad,10px15px20px);

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

　　:root{

　　--primary-color:red;

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

　　}

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

　　.foo{

　　--side:margin-top;

　　/*無(wú)效*/

　　var(--side):20px;

　　}

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

　　三、變量值的類(lèi)型

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

　　--bar:'hello';

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

　　利用這一點(diǎn)，可以debug（例子）。

　　body:after{

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

　　}

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

　　.foo{

　　--gap:20;

　　/*無(wú)效*/

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

　　}

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

　　.foo{

　　--gap:20;

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

　　}

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

　　/*無(wú)效*/

　　.foo{

　　--foo:'20px';

　　font-size:var(--foo);

　　}

　　/*有效*/

　　.foo{

　　--foo:20px;

　　font-size:var(--foo);

　　}

　　四、作用域

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

　　下面是一個(gè)例子。

　　<style>

　　:root{--color:blue;}

　　p{--color:green;}

　　#alert{--color:red;}

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

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

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

　　body{

　　--foo:#7F583F;

　　}

　　.content{

　　--bar:#F7EFD2;

　　}

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

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

　　:root{

　　--main-color:#06c;

　　}

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

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

　　利用這個(gè)特點(diǎn)，可以在響應(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;

　　}

　　}

　　六、兼容性處理

　　對(duì)于不支持CSS變量的瀏覽器，可以采用下面的寫(xiě)法。

　　a{

　　color:#7F583F;

　　color:var(--primary);

　　}

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

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

　　/*supported*/

　　}

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

　　/*notsupported*/

　　}

　　七、JavaScript操作

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

　　constisSupported=

　　window.CSS&&

　　window.CSS.supports&&

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

　　if(isSupported){

　　/*supported*/

　　}else{

　　/*notsupported*/

　　}

　　JavaScript操作CSS變量的寫(xiě)法如下。

　　//設(shè)置變量

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

　　//讀取變量

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

　　//'#7F583F'

　　//刪除變量

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

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

　　constdocStyle=document.documentElement.style;

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

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

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

　　});

　　那些對(duì)CSS無(wú)用的信息，也可以放入CSS變量。

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

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

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

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