> css變量（正式稱為自定義屬性）是用戶定義的值，可以設(shè)置一次，并在整個(gè)代碼庫中多次使用。它們使管理顏色，字體，大小和動(dòng)畫值變得更容易，并確?？鏦eb應(yīng)用程序的一致性。 例如，您可以將品牌顏色設(shè)置為CSS屬性（ - PrimaryColor：＃7232fa），并在使用您的品牌顏色的任何組件或樣式中使用此值（varracky：var（ - prienditcolor）;）。

這篇文章是從我的指南CSS Master中提取的，該帖子教您編寫更好，更有效的CSS。您還將學(xué)會(huì)掌握將改善工作流程并構(gòu)建更好應(yīng)用程序的工具。>

CSS自定義屬性簡(jiǎn)介：CSS變量或自定義屬性，允許開發(fā)人員在整個(gè)樣式表中定義一個(gè)值并重復(fù)使用它們。這通過簡(jiǎn)化顏色，字體，大小和動(dòng)畫值的管理來增強(qiáng)跨Web應(yīng)用程序的代碼可維護(hù)性和一致性。自定義屬性可以在整個(gè)項(xiàng)目中廣泛應(yīng)用，以最小的努力實(shí)現(xiàn)動(dòng)態(tài)更新和主題調(diào)整。

>

1. 實(shí)際實(shí)現(xiàn)和擴(kuò)展功能：通過示例，本文說明了如何定義，使用和操縱CSS自定義屬性出于各種目的，包括主題和響應(yīng)能力。它突出了CSS變量與媒體查詢和JavaScript結(jié)合使用的多功能性，展示了它們具有顯著簡(jiǎn)化樣式策略的潛力，尤其是在基于組件的框架中，例如React，Angular和Vue。這種方法鼓勵(lì)一種模塊化，可維護(hù)和可擴(kuò)展的構(gòu)建Web接口的方式。

2. 定義CSS自定義屬性

要定義自定義屬性，請(qǐng)選擇一個(gè)名稱，然后用兩個(gè)連字符將其前綴。任何字母數(shù)字字符都可以成為名稱的一部分。連字符（ - ）和下劃線（_）字符也允許。廣泛的Unicode字符可以是自定義屬性名稱的一部分。這包括表情符號(hào)，但為了清晰和可讀性，請(qǐng)堅(jiān)持字母數(shù)字。

3. 這是一個(gè)示例：

   <span>--primarycolor: #0ad0f9ff; /* RGB alpha hexadecimal color notation */</span>

   - 向CSS解析器指示這是自定義屬性。當(dāng)用作變量時(shí)，解析引擎將用其值代替屬性。>

   >自定義屬性名稱為

   案例敏感。這意味著 - 主要彩色和 - 原色被認(rèn)為是兩個(gè)不同的屬性名稱。這與傳統(tǒng)的CSS背道而馳，其中財(cái)產(chǎn)和價(jià)值案件無關(guān)緊要。但是，這與eCmascript中可變名稱的規(guī)則一致。 與其他屬性（例如顯示或字體）一樣，必須在聲明塊中定義CSS自定義屬性。一種常見的模式是使用以下方式定義自定義屬性：

   ：root是一個(gè)偽元素，指的是文檔的根元素。對(duì)于HTML文檔，這是元素。對(duì)于SVG文檔，它是

   <span><span>:root</span> {
   </span>  <span>--primarycolor: #0ad0f9ff;
   </span><span>}</span>

   使用CSS變量
   要使用自定義屬性作為變量，我們需要使用var（）函數(shù)。例如，如果我們想將我們的PrimaryColor自定義屬性用作背景顏色，我們將執(zhí)行以下操作：

   我們的自定義屬性的價(jià)值將成為背景色屬性的計(jì)算值。> 到目前為止，自定義屬性只能用作變量來為標(biāo)準(zhǔn)CSS屬性設(shè)置值。例如，您不能將屬性

   名稱

   <span>body {
   </span>    <span>background-color: var(--primarycolor);
   </span><span>}</span>

   存儲(chǔ)為變量，然后重復(fù)使用。以下CSS行不通：

   >您也無法將屬性 - 價(jià)值對(duì)作為變量并重復(fù)使用。以下示例也無效：

   <span><span>:root</span> {
   </span>    <span>--top-border: border-top; /* Can't set a property as custom property's value */
   </span>    <span>var(--top-border): 10px solid #bc84d8; /* Can't use a variable as a property */
   </span><span>}</span>

   >最后，您不能將變量作為值字符串的一部分串聯(lián)：>

   > CSS自定義屬性與CSS變量

   “自定義屬性”是一個(gè)未來的范圍名稱，可以說明有一天如何使用此功能。但是，如果CSS擴(kuò)展規(guī)范由瀏覽器供應(yīng)商實(shí)施，這可能會(huì)改變。該規(guī)范定義了使用自定義選擇器組合，函數(shù)和插曲擴(kuò)展CSS的方法。

   <span><span>:root</span> {
   </span>    <span>--text-color: 'color: orange'; /* Invalid property value */
   </span><span>}
   </span><span>body {
   </span>    <span>var(--text-color); /* Invalid use of a property */
   </span><span>}</span>

   >我們通常將自定義屬性稱為“變量”，迄今為止，這是我們使用它們的唯一方法。從理論上講，它們不是完全可互換的術(shù)語。在實(shí)踐中，就目前而言，它們是。在這篇文章中，我主要會(huì)使用自定義屬性

   ，因?yàn)檫@是他們的專有名稱。當(dāng)它使句子更清晰時(shí)，我將使用

   <span><span>:root</span> {
   </span>    <span>--base-font-size: 10;
   </span><span>}
   </span><span>body {
   </span>    <span>font: var(--base-font-size)px / 1.25 sans-serif; /* Invalid CSS syntax */
   </span><span>}</span>

   >變量。

   >

   設(shè)置后備值
   var（）函數(shù)最多接受兩個(gè)參數(shù)。第一個(gè)參數(shù)應(yīng)該是自定義屬性名稱。第二個(gè)論點(diǎn)是可選的，但必須是聲明值。此聲明值可作為未定義自定義屬性值時(shí)應(yīng)用的后備或默認(rèn)值。

   >

   讓我們以以下CSS：

   <span>--primarycolor: #0ad0f9ff; /* RGB alpha hexadecimal color notation */</span>

   如果定義了 - accent-coltor，則說明其值為＃f30，然后使用.btn__call-to-Action類屬性的任何路徑的填充顏色都會(huì)帶有紅橙色填充。如果未定義，則填充將是深藍(lán)色。

   也可以嵌套聲明值。換句話說，您可以將變量用作var函數(shù)的后備值：>

   在上面的CSS中，如果定義了-books-bg，則背景顏色將設(shè)置為-books-bg屬性的值。如果沒有，背景顏色將是分配給-Arts-BG的任何值。如果兩個(gè)都沒有定義，則背景顏色將是屬性的初始值 - 在這種情況下，透明。

   當(dāng)自定義屬性具有與之使用的屬性無效的值時(shí)，

   <span><span>:root</span> {
   </span>  <span>--primarycolor: #0ad0f9ff;
   </span><span>}</span>

   發(fā)生類似的事情?？紤]以下CSS：
   在這種情況下， - 英尺鏈路懸掛屬性的值不是有效的顏色。相反，頁腳A：懸停從元素的顏色繼承其顏色。

   >

   自定義屬性以相同的方式解決其他CSS值。如果該值無效或未定義，則CSS解析器如果屬性是繼承的（例如顏色或字體），則使用繼承的值，如果沒有屬性，則將使用初始值（如背景色）。

   <span>body {
   </span>    <span>background-color: var(--primarycolor);
   </span><span>}</span>

   >

   >級(jí)聯(lián)值

   自定義屬性也遵守級(jí)聯(lián)的規(guī)則。隨后的規(guī)則可以覆蓋它們的價(jià)值：

   在上面的示例中，我們的身體文字將是深灰色。我們還可以以人均為基礎(chǔ)重置值。讓我們?cè)诖薈SS中添加更多規(guī)則：

   <span><span>:root</span> {
   </span>    <span>--top-border: border-top; /* Can't set a property as custom property's value */
   </span>    <span>var(--top-border): 10px solid #bc84d8; /* Can't use a variable as a property */
   </span><span>}</span>

   在這種情況下，任何包裹在

   元素標(biāo)簽中的文本都是橙色的。但是

   或其他元素中的文字仍然是深灰色。

   >

   >您還可以使用樣式屬性設(shè)置自定義屬性的值，例如，style =“ - 品牌色：＃9A09AF”。

   <span><span>:root</span> {
   </span>    <span>--text-color: 'color: orange'; /* Invalid property value */
   </span><span>}
   </span><span>body {
   </span>    <span>var(--text-color); /* Invalid use of a property */
   </span><span>}</span>

   >自定義屬性和調(diào)色板

   自定義屬性特別適合管理HSL調(diào)色板。?

   hsl代表

   色調(diào)，飽和度，輕度

   。這是一種類似于RGB的淺色顏色模型。通過HSL（）和HSLA（）顏色函數(shù)，我們可以在CSS中使用HSL值。 HSL（）函數(shù)接受三個(gè)參數(shù)：色調(diào)，飽和度和輕度。 HLSA（）函數(shù)也接受第四個(gè)參數(shù)，表明顏色的alpha透明度（值為0到1）。當(dāng)RGB系統(tǒng)以紅色，綠色和藍(lán)色的比例表示顏色時(shí)，HSL使用顏色圓，其中色調(diào)是該圓圈的度位，并且使用飽和度和輕度值定義了色調(diào)或陰影。飽和度范圍從0％到100％，其中0％為灰色，100％是全顏色。輕度也可以從0％到100％，其中0％是黑色，100％是白色，而50％是正常顏色。

   >

   > crazyterabyte的彩色輪。 在HSL顏色系統(tǒng)中，主要的紅色，綠色和藍(lán)色的原色位于0度/360度，120度和240度的相距120度。次要顏色 - 月份，洋紅色和黃色 - 也相距120度，但坐在原色的對(duì)面，分別為180度，300度和60度/420度。第三紀(jì)，第四紀(jì)和其他顏色以大約十度增量介于兩者之間。藍(lán)色使用HSL符號(hào)編寫的是HSL（240，100％，50％）。

   hsl參數(shù)單位 >在HSL（）和HSLA（）函數(shù)的第一個(gè)參數(shù)中使用無單位值時(shí)，瀏覽器假定它是度單位的角度。但是，您可以使用任何支持的CSS角度單元。藍(lán)色也可以表示為HSL（240DEG，100％，50％），HSL（4.188RAD，100％，50％）或HSLA（0.66Turn，100％50％）。

   >

   這是很有趣的地方。我們可以使用自定義屬性設(shè)置我們的色調(diào)值，并通過調(diào)整飽和度和輕度值來設(shè)置更輕和較深的陰影：

   上面的CSS為我們提供了下面所示的調(diào)色板。

   >

   這是一個(gè)簡(jiǎn)單的版本，但是您也可以使用自定義屬性來調(diào)整飽和度和亮度值。>

   <span>--primarycolor: #0ad0f9ff; /* RGB alpha hexadecimal color notation */</span>

   強(qiáng)大的調(diào)色板生成

   Dieter Raber討論了一種在“創(chuàng)建具有自定義屬性，HSL和Little Calc（）的顏色主題的穩(wěn)健調(diào)色板的技術(shù)”。

   >

   >另一個(gè)想法是將自定義屬性和Calc（）函數(shù)組合起來，以從基本色調(diào)生成方形方案。讓我們?cè)谙乱粋€(gè)示例中創(chuàng)建一個(gè)方形方案。 A正方形的配色方案由四種顏色組成，它們?cè)谏喩媳舜说染?，也就是說，相距90度：

   這一點(diǎn)CSS為我們提供了下面所示的熱帶風(fēng)格的配色方案。

   正如我們將在后面的一節(jié)中看到的那樣，自定義屬性也可以與媒體查詢合作。

   使用CSS變量制作深色主題調(diào)色板

   >您可以使用CSS自定義屬性來定義網(wǎng)站上的黑暗和光主題的一組變量。

   以頁面樣式的以下示例，我們可以在不同的選擇器中使用變量替換所有HSL顏色，以定義以下顏色的自定義屬性：root：root：>

   已使用了自定義屬性的適當(dāng)名稱。例如，-nav-bg-color是指

   <span>--primarycolor: #0ad0f9ff; /* RGB alpha hexadecimal color notation */</span>

   nav背景的顏色，而 - nav-text-color是指nav nav前景/文本的顏色。 現(xiàn)在復(fù)制：root選擇器具有其內(nèi)容，但添加一個(gè)主題屬性，用dark

   value：

   > 如果A

   <span><span>:root</span> {
   </span>  <span>--primarycolor: #0ad0f9ff;
   </span><span>}</span>

   dark> dark 值將添加到元素中。 element。 >現(xiàn)在，我們可以通過降低HSL顏色的輕度值來提供這些變量的值，以提供深色主題，或者我們可以使用其他技術(shù)，例如Invert（）和brightness（）和brightness（），它通常用于調(diào)整圖像的渲染，但也可以與任何其他元素一起使用。 >將以下代碼添加到：root [theme ='dark']：>

   invert（）過濾器將所選元素中的所有顏色反轉(zhuǎn)（在這種情況下為每個(gè)元素）?？梢砸园俜直然驍?shù)字指定反轉(zhuǎn)的值。 100％或1的值將完全倒轉(zhuǎn)元素的色調(diào)，飽和度和亮度值。

   亮度（）過濾器使元素更明亮或更暗。值為0導(dǎo)致完全黑暗的元素。

   > >一個(gè)黑暗的黑暗主題：

   <span>body {
   </span>    <span>background-color: var(--primarycolor);
   </span><span>}</span>

   用JavaScript

   切換主題

   >現(xiàn)在，當(dāng)用戶單擊 dark/light

   按鈕時(shí)，讓我們使用JavaScript在黑暗和光線主題之間切換。在您的html中，在關(guān)閉之前添加了一個(gè)inline <script>，并使用以下代碼：<and>> <p> document.documentElement是指文檔的根元素元素 - 即<html>。此代碼檢查使用.hasattribute（）方法是否存在a<figure >theme <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173907506484359.png" class="lazy" alt="如何在CSS中使用變量：CSS自定義屬性" >屬性的存在，并在不存在的情況下添加屬性，并添加 dark <h4 >值（如果不存在），從而導(dǎo)致切換到黑暗主題。否則，它將刪除屬性，從而切換到光主題。<ancy>> 注意：您還應(yīng)該將其與CSS中的Prefers-Scheme功能結(jié)合使用，該功能可用于從用戶的操作系統(tǒng)或用戶代理（瀏覽器）設(shè)置中自動(dòng)更改光/黑色主題。這將在下一部分中顯示。<p> <em>使用自定義屬性和媒體查詢> >我們還可以將自定義屬性與媒體查詢一起使用。例如，您可以使用自定義屬性來定義淺色和深色方案：<ancy>><pre ><span >--primarycolor: #0ad0f9ff; /* RGB alpha hexadecimal color notation */ 同樣，我們可以使用自定義屬性來更改屏幕字體大小與打?。?lt;p> <pre ><span ><span >:root { <span >--primarycolor: #0ad0f9ff; <span >}在這種情況下，我們使用適合媒體的單元進(jìn)行打印和屏幕。對(duì)于這兩種媒體，我們都將使用10個(gè)單元的基本字體大小 - 屏幕像素，打印點(diǎn)。我們還將使用-base-font-size的值：為根元素（HTML）設(shè)置起始大小。然后，我們可以使用REM單元相對(duì)于基本字體大小來大小。 <p>使用JavaScript使用自定義屬性 <h2 >記住：自定義屬性是CSS屬性，我們可以與之交互。例如，我們可以使用css.supports（）API來測(cè)試瀏覽器是否支持自定義屬性：<ancy>> <p>>我們還可以使用setProperty（）方法來設(shè)置自定義屬性值：<ancy> <pre ><span >body { <span >background-color: var(--primarycolor); <span >}使用RemoveProperty（）的工作方式相似。只需將自定義屬性名稱作為參數(shù)傳遞：<p>> <pre ><span ><span >:root { <span >--top-border: border-top; /* Can't set a property as custom property's value */ <span >var(--top-border): 10px solid #bc84d8; /* Can't use a variable as a property */ <span >}>將自定義屬性用作使用JavaScript的值，將var（）函數(shù)與屬性名稱一起使用作為其參數(shù)：<ancy>> <p> a，您無法使用樣式對(duì)象的Square-Gracket語法或基于駱駝的屬性設(shè)置自定義屬性。換句話說，document.body.style .-- bg-home和document.body.Style [' - bg-home']將起作用。<pre ><span ><span >:root { <span >--text-color: 'color: orange'; /* Invalid property value */ <span >} <span >body { <span >var(--text-color); /* Invalid use of a property */ <span >}> <p>自定義屬性和組件 <pre ><span ><span >:root { <span >--base-font-size: 10; <span >} <span >body { <span >font: var(--base-font-size)px / 1.25 sans-serif; /* Invalid CSS syntax */ <span >}> JavaScript框架，例如React，Angular和Vue，使開發(fā)人員使用JavaScript創(chuàng)建可重復(fù)使用的HTML的可重復(fù)使用，可共享的塊，通常使用在組件級(jí)別定義的CSS。 <p>這是用jsx編寫的React組件的一個(gè)示例 <h2 > 在JavaScript Frameworks>上的更多信息 如果您想了解有關(guān)使用JavaScript Frameworks的更多信息，則<ancultspoint具有廣泛的React，Angular和Vue資源。對(duì)于React，請(qǐng)與React <ance>和廣泛的React文章一起查看<p>。對(duì)于Angular，有學(xué)習(xí)角度：您的第一周<p>以及大量的角度文章和教程。對(duì)于Vue，請(qǐng)查看<strong >跳躍啟動(dòng)vue.js和更多vue文章。<pre ><span ><span >.btn__call-to-action { <span >background: var(--accent-color, deepskyblue); <span >} <h3 >我們的React組件將CSS導(dǎo)入到JavaScript文件中。編譯后，將field-button.css的內(nèi)容內(nèi)聯(lián)加載。這是一種將其與自定義屬性一起使用的可能方法： <p> <em >在此示例中，我們使用了一個(gè)自定義屬性 - dutton-bg-color-為按鈕的背景顏色，以及默認(rèn)的顏色，以防萬一 - button-bg-color永遠(yuǎn)不會(huì)定義。從這里開始，我們可以在全局樣式表中或本地通過樣式屬性設(shè)置-button-bg-color的值。> <em >>讓我們將值設(shè)置為“ prop”。 reactprops（<em >屬性的簡(jiǎn)短）模擬元素屬性。它們是將數(shù)據(jù)傳遞到React組件中的一種方式。在這種情況下，我們將添加一個(gè)名為buttonbgcolor的道具：<pre ><span >--primarycolor: #0ad0f9ff; /* RGB alpha hexadecimal color notation */ <p>現(xiàn)在，我們需要更新我們的fieldButtongroup來支持此更改：<ancy>> <pre ><span ><span >:root { <span >--primarycolor: #0ad0f9ff; <span >}>在上面的代碼中，我們添加了一個(gè)保存我們自定義屬性名稱并將其值設(shè)置為我們的buttonbgcolor prop的值，并將樣式屬性設(shè)置為我們的按鈕。<p>> 使用該樣式屬性可能與您所學(xué)到的有關(guān)編寫CSS的所有內(nèi)容相反。 CSS的賣點(diǎn)是，我們可以定義一組在多個(gè)HTML和XML文檔中使用的樣式。另一方面，樣式屬性將CSS的范圍限制為應(yīng)用于其應(yīng)用的元素。我們無法重復(fù)使用。而且我們無法利用級(jí)聯(lián) <p>但是，在基于組件的前端體系結(jié)構(gòu)中，一個(gè)組件可以在多個(gè)上下文中，多個(gè)團(tuán)隊(duì)使用，甚至可以在客戶端項(xiàng)目中共享。在這種情況下，您可能需要將級(jí)聯(lián)的“全局范圍”與樣式屬性提供的狹窄“本地范圍”相結(jié)合。 <p>>設(shè)置具有樣式屬性的自定義屬性值將效果限制為<ante> fieldButtongroup組件的此特定實(shí)例。但是，由于我們使用了自定義屬性而不是標(biāo)準(zhǔn)CSS屬性，因此我們?nèi)匀豢梢赃x擇 - 在鏈接樣式表中的button-bg-color，而不是作為組件prop。 <p>結(jié)論<em > >自定義屬性是預(yù)處理器（Variables）的最佳功能之一，并使它們成為CSS的本地。使用自定義屬性，我們可以： <h2 > 創(chuàng)建可重復(fù)使用的主題組件<p> >輕松調(diào)整填充，邊距和版式，以適用于一系列視口尺寸和媒體<ul > <li>提高我們CSS 中顏色值的一致性 <li> 變量具有一系列應(yīng)用程序，并且在基于組件的設(shè)計(jì)系統(tǒng)中特別有用。 <li>>希望您現(xiàn)在對(duì)CSS中的變量或自定義屬性有了更好的了解。查看我的書CSS大師，以擴(kuò)展您的CSS知識(shí)并獲得此類有用的技巧。> <p> 關(guān)于CSS自定義屬性的<ancy>常見問題 什么是CSS自定義屬性？ > css自定義屬性，也稱為CSS變量，是開發(fā)人員定義的實(shí)體，以存儲(chǔ)和重復(fù)使用值在樣式表中。它們以 - 前綴（例如 - 彩色）開頭，可以在整個(gè)樣式表中分配要使用的值。<p>> 如何聲明CSS自定義屬性？ >聲明CSS自定義屬性，使用 - 前綴，然后使用一個(gè)名稱，例如 - 彩色。您可以使用var（）函數(shù)為其分配一個(gè)值，例如var（ - 主顏色：＃3498db）。 使用CSS自定義屬性的優(yōu)點(diǎn)是什么？ <p>> CSS自定義屬性提供了一種更靈活，可維護(hù)的方式來管理樣式。它們?cè)试S簡(jiǎn)單的主題，快速更新和價(jià)值集中化，促進(jìn)更清潔和更模塊化的代碼。CSS自定義屬性不僅可以用于顏色嗎？ 是的，CSS自定義屬性可用于各種類型的值，包括顏色，字體尺寸，間距等。它們提供了一種參數(shù)化樣式表中的任何值的方法。<p >> CSS自定義屬性是否繼承？ 是的，CSS自定義屬性遵循標(biāo)準(zhǔn)繼承規(guī)則。如果未在元素上定義屬性，則將其從其父屬于其父屬。這使它們有力地創(chuàng)建一致的設(shè)計(jì)系統(tǒng)。> CSS自定義屬性可以在媒體查詢中使用嗎？ 是的，可以在媒體查詢中使用CSS自定義屬性。這可以通過基于屏幕尺寸或其他媒體功能調(diào)整屬性值來提高動(dòng)態(tài)響應(yīng)。<and>></script>

以上是如何在CSS中使用變量：CSS自定義屬性的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！