今天，CSS預(yù)處理器是Web開(kāi)發(fā)的標(biāo)準(zhǔn)。 預(yù)處理器的一個(gè)主要優(yōu)點(diǎn)是它們使您能夠使用變量， 這有助于您避免復(fù)制和粘貼代碼，并簡(jiǎn)化了開(kāi)發(fā)和重構(gòu)。

在本文中，您將了解到如何將CSS變量集成到CSS開(kāi)發(fā)工作流程中，這會(huì)使得樣式表更易于維護(hù)和不重復(fù)性。

現(xiàn)在，讓我開(kāi)始吧！

1* css變量的語(yǔ)法

<1> 什么是css變量？

如果您使用過(guò)任何一種編程語(yǔ)言，那么您應(yīng)該已經(jīng)熟悉了變量的概念。 變量允許您存儲(chǔ)和更新程序所需的值以便工作。

在CSS中使用變量的好處與在編程語(yǔ)言中使用變量的好處并沒(méi)有太大的不同。

以下是規(guī)范對(duì)此的說(shuō)法：

[Using CSS variables] makes it easier to read large files, as seemingly-arbitrary values now have informative names, and makes editing such files much easier and less error-prone, as one only has to change the value once, in the custom property, and the change will propagate to all uses of that variable automatically.

W3C Specification .

[使用CSS變量]可以更容易地讀取大文件，因?yàn)榭此迫我獾闹惮F(xiàn)在具有信息性名稱(chēng)，并且使得編輯此類(lèi)文件更容易且更不容易出錯(cuò)，因?yàn)橹恍枰谧远x屬性中更改一次值 ，這種更改將自動(dòng)傳播到所有使用該變量的地方。

<2>css自定義變量語(yǔ)法

要聲明變量而不是常用的CSS屬性（如顏色或填充），只需提供以 - - 開(kāi)頭的自定義命名屬性：

.box{
  --box-color: #4d4e53;
  --box-padding: 0 10px;
}

屬性的值可以是任何有效的CSS值：顏色，字符串，布局值，甚至是表達(dá)式。

以下是一些有用的自定義屬性：

:root{
  --main-color: #4d4e53;
  --main-bg: rgb(255, 255, 255);
  --logo-border-color: rebeccapurple;
  --header-height: 68px;
  --content-padding: 10px 20px;
  --base-line-height: 1.428571429;
  --transition-duration: .35s;
  --external-link: "external link";
  --margin-top: calc(2vh + 20px);
  /* Valid CSS custom properties can be reused later in, say, JavaScript. */
  --foo: if(x > 5) this.width = 10;
}

如果您不確定 :root，在HTML中它與html相同但具有更高的特異性，相當(dāng)于全局變量。

<3> css變量的使用

var() 函數(shù)

您要通過(guò) var（） 這個(gè) css 函數(shù)來(lái)使用 css 變量，將 css 變量名傳入這個(gè)函數(shù)：

.box{
  --box-color:#4d4e53;
  --box-padding: 0 10px;

  padding: var(--box-padding);
}

.box div{
  color: var(--box-color);
}

var() 函數(shù)的語(yǔ)法是：
 

var( <custom-property-name> [, <declaration-value> ]? )

方法的第一個(gè)參數(shù)是要替換的自定義屬性的名稱(chēng)。函數(shù)的可選第二個(gè)參數(shù)用作回退值。如果第一個(gè)參數(shù)引用的自定義屬性無(wú)效，則該函數(shù)將使用第二個(gè)值。

如果您不確定是否已定義自定義屬性并且想要提供用作回退的值，則可以執(zhí)行此操作。

例如：

color: var(--foo, red, blue); //將red, blue同時(shí)指定為回退值；即是說(shuō)任何在第一個(gè)逗號(hào)之后到函數(shù)結(jié)尾前的值都會(huì)被考慮為回退值。

padding: var(--box-padding, var(--main-padding));

calc()函數(shù)

由于我們習(xí)慣使用預(yù)處理器和其他語(yǔ)言，我們希望在處理變量時(shí)能夠使用基本運(yùn)算符。 為此，CSS提供了一個(gè)calc（）函數(shù)，它使瀏覽器在對(duì)自定義屬性的值進(jìn)行任何更改后重新計(jì)算表達(dá)式：

:root{
  --indent-size: 10px;

  --indent-xl: calc(2*var(--indent-size));
  --indent-l: calc(var(--indent-size) + 2px);
  --indent-s: calc(var(--indent-size) - 2px);
  --indent-xs: calc(var(--indent-size)/2);
}

如果您嘗試使用無(wú)單位值，則使用calc()函數(shù)可以帶來(lái)很大的方便：

:root{
  --spacer: 10;
}
.box{
  padding: var(--spacer)px 0; /* DOESN'T work */
  padding: calc(var(--spacer)*1px) 0; /* WORKS */
}

css自定義屬性的scop

自定義屬性也遵守CSS層疊規(guī)則。
 

2* 利用js使用css自定義屬性

假設(shè)您有一個(gè)名為 --left-pos 的 CSS 變量，其值為 100px，范圍為 CSS 文檔中的 .sidebar 類(lèi)：

.sidebar {
--left-pos: 100px;
}

可以通過(guò)如下方式獲取 --left-pos 的值：

const sidebarElement = document.querySelector('.sidebar');
const cssStyles = getComputedStyle(sidebarElement);
const cssVal = String(cssStyles.getPropertyValue('--left-pos')).trim();
console.log(cssVal); //100px

設(shè)置css屬性值：

sidebarElement.style.setProperty('--left-pos', '200px');

3* css 變量和預(yù)處理變量有什么不同？

在樣式化網(wǎng)站時(shí)，您可能通過(guò)使用Sass和Less等預(yù)處理器來(lái)使得變量的更具有靈活性。

預(yù)處理器允許您設(shè)置變量，并在函數(shù)，循環(huán)，數(shù)學(xué)運(yùn)算等中使用它們。這是否意味著CSS變量無(wú)關(guān)緊要？

不完全是，主要是因?yàn)镃SS變量與預(yù)處理器變量不同。

差異源于CSS變量是在瀏覽器中運(yùn)行的真正的CSS屬性，而預(yù)處理器變量需要被編譯成常規(guī)CSS代碼，因此瀏覽器對(duì)它們一無(wú)所知。

這意味著您可以更新樣式表文檔中的CSS變量，內(nèi)聯(lián)樣式屬性和SVG表示屬性，或者選擇使用JavaScript 動(dòng)態(tài) 操作它們。對(duì)于 CSS 自定義屬性的修改，會(huì)立馬傳遞到使用到他的地方，而預(yù)處理器則無(wú)法完成這種行為，因?yàn)樗麄兪翘崆耙呀?jīng)編譯好了的！

這并不是說(shuō)你需要在一個(gè)或另一個(gè)之間做出選擇：沒(méi)有什么能阻止你利用CSS和預(yù)處理器變量一起工作的超能力。

總結(jié)

以上所述是小編給大家介紹的初步認(rèn)識(shí)css自定義屬性，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

最新評(píng)論