首頁 >web前端 >css教學 >如何在CSS中使用變量：CSS自定義屬性

如何在CSS中使用變量：CSS自定義屬性

William Shakespeare原創: 2025-02-09 12:24:11510瀏覽

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

除了提供清潔器和非重複代碼外，CSS變量還可用於構建調色板，提高響應能力並創建動態類型系統。

這篇文章是從我的指南CSS Master中提取的，該帖子教您編寫更好，更有效的CSS。您還將學會掌握將改善工作流程並構建更好應用程序的工具。 >

鑰匙要點

CSS自定義屬性簡介：CSS變量或自定義屬性，允許開發人員在整個樣式表中定義一個值並重複使用它們。這通過簡化顏色，字體，大小和動畫值的管理來增強跨Web應用程序的代碼可維護性和一致性。自定義屬性可以在整個項目中廣泛應用，以最小的努力實現動態更新和主題調整。

CSS變量的優點和應用：除了減少重複來清理代碼外，CSS變量可以解鎖創建動態主題，響應式設計和系統類型量表的潛力。它們有助於管理複雜的調色板和佈局，從而根據用戶互動或環境條件（例如在輕度和深色模式之間切換）來促進對設計元素進行更輕鬆的調整。

實際實現和擴展功能：通過示例，本文說明瞭如何定義，使用和操縱CSS自定義屬性出於各種目的，包括主題和響應能力。它突出了CSS變量與媒體查詢和JavaScript結合使用的多功能性，展示了它們具有顯著簡化樣式策略的潛力，尤其是在基於組件的框架中，例如React，Angular和Vue。這種方法鼓勵一種模塊化，可維護和可擴展的構建Web接口的方式。
定義CSS自定義屬性
這是一個示例：
```
--primarycolor: #0ad0f9ff; /* RGB alpha hexadecimal color notation */
```
- 向CSS解析器指示這是自定義屬性。當用作變量時，解析引擎將用其值代替屬性。 >
>自定義屬性名稱為
案例敏感。這意味著 - 主要彩色和 - 原色被認為是兩個不同的屬性名稱。這與傳統的CSS背道而馳，其中財產和價值案件無關緊要。但是，這與eCmascript中可變名稱的規則一致。與其他屬性（例如顯示或字體）一樣，必須在聲明塊中定義CSS自定義屬性。一種常見的模式是使用以下方式定義自定義屬性：

：root是一個偽元素，指的是文檔的根元素。對於HTML文檔，這是元素。對於SVG文檔，它是
```
:root {
 --primarycolor: #0ad0f9ff;
}
```
使用CSS變量

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

我們的自定義屬性的價值將成為背景色屬性的計算值。 > 到目前為止，自定義屬性只能用作變量來為標準CSS屬性設置值。例如，您不能將屬性
名稱
```
body {
 background-color: var(--primarycolor);
}
```
存儲為變量，然後重複使用。以下CSS行不通：

>您也無法將屬性 - 價值對作為變量並重複使用。以下示例也無效：
```
:root {
 --top-border: border-top; /* Can't set a property as custom property's value */
 var(--top-border): 10px solid #bc84d8; /* Can't use a variable as a property */
}
```
>最後，您不能將變量作為值字符串的一部分串聯：
>
> CSS自定義屬性與CSS變量
“自定義屬性”是一個未來的範圍名稱，可以說明有一天如何使用此功能。但是，如果CSS擴展規範由瀏覽器供應商實施，這可能會改變。該規範定義了使用自定義選擇器組合，函數和插曲擴展CSS的方法。
```
:root {
 --text-color: 'color: orange'; /* Invalid property value */
}
body {
 var(--text-color); /* Invalid use of a property */
}
```
>我們通常將自定義屬性稱為“變量”，迄今為止，這是我們使用它們的唯一方法。從理論上講，它們不是完全可互換的術語。在實踐中，就目前而言，它們是。在這篇文章中，我主要會使用自定義屬性
，因為這是他們的專有名稱。當它使句子更清晰時，我將使用
```
:root {
 --base-font-size: 10;
}
body {
 font: var(--base-font-size)px / 1.25 sans-serif; /* Invalid CSS syntax */
}
```
>變量。
>
設置後備值

var（）函數最多接受兩個參數。第一個參數應該是自定義屬性名稱。第二個論點是可選的，但必須是聲明值。此聲明值可作為未定義自定義屬性值時應用的後備或默認值。
>

讓我們以以下CSS：
```
--primarycolor: #0ad0f9ff; /* RGB alpha hexadecimal color notation */
```
如果定義了 - accent-coltor，則說明其值為＃f30，然後使用.btn__call-to-Action類屬性的任何路徑的填充顏色都會帶有紅橙色填充。如果未定義，則填充將是深藍色。
也可以嵌套聲明值。換句話說，您可以將變量用作var函數的後備值：
>
在上面的CSS中，如果定義了-books-bg，則背景顏色將設置為-books-bg屬性的值。如果沒有，背景顏色將是分配給-Arts-BG的任何值。如果兩個都沒有定義，則背景顏色將是屬性的初始值 - 在這種情況下，透明。
當自定義屬性具有與之使用的屬性無效的值時，
```
:root {
 --primarycolor: #0ad0f9ff;
}
```
發生類似的事情。考慮以下CSS：

在這種情況下， - 英尺鏈路懸掛屬性的值不是有效的顏色。相反，頁腳A：懸停從元素的顏色繼承其顏色。
>
自定義屬性以相同的方式解決其他CSS值。如果該值無效或未定義，則CSS解析器如果屬性是繼承的（例如顏色或字體），則使用繼承的值，如果沒有屬性，則將使用初始值（如背景色）。
```
body {
 background-color: var(--primarycolor);
}
```
>
>級聯值

自定義屬性也遵守級聯的規則。隨後的規則可以覆蓋它們的價值：

在上面的示例中，我們的身體文字將是深灰色。我們還可以以人均為基礎重置值。讓我們在此CSS中添加更多規則：
```
:root {
 --top-border: border-top; /* Can't set a property as custom property's value */
 var(--top-border): 10px solid #bc84d8; /* Can't use a variable as a property */
}
```
在這種情況下，任何包裹在
元素標籤中的文本都是橙色的。但是
或其他元素中的文字仍然是深灰色。
>
>您還可以使用樣式屬性設置自定義屬性的值，例如，style =“ - 品牌色：＃9A09AF”。
```
:root {
 --text-color: 'color: orange'; /* Invalid property value */
}
body {
 var(--text-color); /* Invalid use of a property */
}
```
>自定義屬性和調色板

自定義屬性特別適合管理HSL調色板。
hsl代表
色調，飽和度，輕度
。這是一種類似於RGB的淺色顏色模型。通過HSL（）和HSLA（）顏色函數，我們可以在CSS中使用HSL值。 HSL（）函數接受三個參數：色調，飽和度和輕度。 HLSA（）函數也接受第四個參數，表明顏色的alpha透明度（值為0到1）。當RGB系統以紅色，綠色和藍色的比例表示顏色時，HSL使用顏色圓，其中色調是該圓圈的度位，並且使用飽和度和輕度值定義了色調或陰影。飽和度範圍從0％到100％，其中0％為灰色，100％是全顏色。輕度也可以從0％到100％，其中0％是黑色，100％是白色，而50％是正常顏色。

>
> crazyterabyte的彩色輪。在HSL顏色系統中，主要的紅色，綠色和藍色的原色位於0度/360度，120度和240度的相距120度。次要顏色 - 月份，洋紅色和黃色 - 也相距120度，但坐在原色的對面，分別為180度，300度和60度/420度。第三紀，第四紀和其他顏色以大約十度增量介於兩者之間。藍色使用HSL符號編寫的是HSL（240，100％，50％）。
hsl參數單位 >在HSL（）和HSLA（）函數的第一個參數中使用無單位值時，瀏覽器假定它是度單位的角度。但是，您可以使用任何支持的CSS角度單元。藍色也可以表示為HSL（240DEG，100％，50％），HSL（4.188RAD，100％，50％）或HSLA（0.66Turn，100％50％）。
>
這是很有趣的地方。我們可以使用自定義屬性設置我們的色調值，並通過調整飽和度和輕度值來設置更輕和較深的陰影：

上面的CSS為我們提供了下面所示的調色板。
>

這是一個簡單的版本，但是您也可以使用自定義屬性來調整飽和度和亮度值。
>
--primarycolor: #0ad0f9ff; /* RGB alpha hexadecimal color notation */
強大的調色板生成
Dieter Raber討論了一種在“創建具有自定義屬性，HSL和Little Calc（）的顏色主題的穩健調色板的技術”。
>
>另一個想法是將自定義屬性和Calc（）函數組合起來，以從基本色調生成方形方案。讓我們在下一個示例中創建一個方形方案。 A正方形的配色方案由四種顏色組成，它們在色輪上彼此等距，也就是說，相距90度：

這一點CSS為我們提供了下面所示的熱帶風格的配色方案。

正如我們將在後面的一節中看到的那樣，自定義屬性也可以與媒體查詢合作。
使用CSS變量製作深色主題調色板

>您可以使用CSS自定義屬性來定義網站上的黑暗和光主題的一組變量。
以頁面樣式的以下示例，我們可以在不同的選擇器中使用變量替換所有HSL顏色，以定義以下顏色的自定義屬性：root：root：>
已使用了自定義屬性的適當名稱。例如，-nav-bg-color是指
--primarycolor: #0ad0f9ff; /* RGB alpha hexadecimal color notation */

nav背景的顏色，而 - nav-text-color是指nav nav前景/文本的顏色。 現在復制：root選擇器具有其內容，但添加一個主題屬性，用dark
value：
> 如果A

:root { --primarycolor: #0ad0f9ff; }

dark> dark 值將添加到元素中。 element。 >現在，我們可以通過降低HSL顏色的輕度值來提供這些變量的值，以提供深色主題，或者我們可以使用其他技術，例如Invert（）和brightness（）和brightness（），它通常用於調整圖像的渲染，但也可以與任何其他元素一起使用。 >將以下代碼添加到：root [theme ='dark']：>
invert（）過濾器將所選元素中的所有顏色反轉（在這種情況下為每個元素）。可以以百分比或數字指定反轉的值。 100％或1的值將完全倒轉元素的色調，飽和度和亮度值。
亮度（）過濾器使元素更明亮或更暗。值為0導致完全黑暗的元素。
> >一個黑暗的黑暗主題：

body { background-color: var(--primarycolor); }

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

以上是如何在CSS中使用變量：CSS自定義屬性的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：如何使用CSS網格中心下一篇：如何使用CSS網格中心

看更多

如何在CSS中使用變量：CSS自定義屬性

>

上面的CSS為我們提供了下面所示的調色板。

相關文章