如何像專家一樣使用 CSS 變量
CSS 變量，也稱為自定義屬性，可幫助您最大程度地減少樣式表中的重複。這反過來又可以幫助您在更改設計時節省時間和精力。您也可以放心，您不會錯過任何需要更新的值。
訪問 DOM 允許您創建變量、存儲它們並在整個樣式表中重用它們。
如何定義和使用 CSS 變量
為了使您的樣式表更加有序、可維護和可重用，您可以在任何接受值的屬性中使用 CSS 變量。
以不使用 CSS 變量的 HTML 文件和 CSS 文件為例。
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Variables - Button Variations</title>
<link rel="stylesheet" href="Variables.css" />
</head>
<body>
<div>
<h1>CSS Variables</h1>
<div>
<button class="btn sub-primary">Primary</button>
<button class="btn">Secondary</button>
</div>
</div>
</body>
</html>
CSS：
.btn {
padding: 1rem 1.5rem;
background: transparent;
font-weight: 700;
color: red;
}
這是您的頁面的外觀：
上面樣式表中使用的.btn類不是動態的，它會導致您創建一個單獨的類來自定義各個按鈕。創建漂亮的網站需要您的前端樣式充滿活力。以這種方式實現按鈕只會使該任務難以實現。
與大多數編程語言一樣，您必須初始化和替換 CSS 變量。
要初始化 CSS 變量，請在變量名稱前加上雙連字符：
:root{
/*CSS variable*/
--variable_name: value;
}
您可以在任何地方初始化變量，但請注意，您只能在已初始化的選擇器中使用該變量。因此，CSS 變量通常在根選擇器內初始化。這針對 DOM 的最高級別元素，並允許整個 HTML 文檔在全局範圍內訪問變量。
要將變量替換為您的 CSS 樣式，您將使用var()屬性：
:root {
/*CSS variable*/
--primary: #900c3f;
--secondary: #ff5733;
}
.btn {
padding: 1rem 1.5rem;
background: transparent;
font-weight: 700;
color: var(--primary);
background-color: var(--secondary);
}
.sub-primary {
color: var(--secondary);
background-color: var(--primary);
}
根選擇器包含兩個變量：–primary和–secondary。然後將這兩個變量分別作為顏色和背景色代入.btn類。
使用變量，您可以更輕鬆地設置單個元素的樣式。通過重用變量，您可以快速更改一次值以在每個實例中更新它。
var()屬性也可以接受第二個參數。在第一個參數未定義或無效的情況下，此參數充當第一個參數的回退值。
例如：
:root {
--primary: #900c3f;
--secondary: #ff5733;
}
.btn {
padding: 1rem 1.5rem;
background: transparent;
font-weight: 700;
color: var(--primary, blue);
}
在此示例中，將–primary變量替換為顏色樣式。如果出於某種原因，此值失敗，樣式表將使用第二個值作為後備。您還可以使用另一個 CSS 變量作為備用值。
使用 JavaScript 操作和覆蓋 CSS 變量
使用 JavaScript 操作 CSS 變量是一種動態更改網站外觀的有效方法。使用 JavaScript，您可以更新這些變量的值並查看反映在您站點中的更改。
請務必注意，使用 JavaScript 所做的更改將僅適用於當前會話。您必須更新原始來源或將新值存儲在客戶端（如 cookie 中）以保留更改。
下面是一個如何使用 JavaScript 更新 CSS 變量值的示例。
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Variables - Button Variations</title>
<link rel="stylesheet" href="Variables.css" />
<script>
function changeColor() {
// Get the element you want to change the variable on
const myElement = document.querySelector(":root");
// Get the current value of the variable
let currentValue = getComputedStyle(myElement).getPropertyValue(
"--secondary"
);
// Set the new value for the variable
myElement.style.setProperty("--secondary", "#DAF7A6");
}
</script>
</head>
<body>
<div>
<h1>CSS Variables</h1>
<div>
<button class="btn sub-primary" onclick="changeColor()">
Primary
</button>
<button class="btn">Secondary</button>
</div>
</div>
</body>
</html>
CSS：
:root {
--primary: #900c3f;
--secondary: #ff5733;
}
.btn {
padding: 1rem 1.5rem;
background: transparent;
font-weight: 700;
}
.sub-primary {
color: var(--primary);
background-color: var(--secondary);
}
在此 JavaScript 代碼中，當用戶單擊第一個按鈕時， changeColor()函數會更新第一個按鈕的顏色。
使用 DOM 遍歷方法，您可以訪問 HTML 文檔中應用的類或選擇器並操作這些值。
點擊按鈕前：
點擊按鈕後：
您還可以使用 JavaScript 創建新的 CSS 變量或完全刪除它們。
例如：
// Create a new variable
document.documentElement.style.setProperty('--new-color', 'blue');
// Remove a variable
document.documentElement.style.removeProperty('--new-color');
在預處理器中使用 CSS 變量
在前端技術中使用變量最初是通過SASS、LESS 和 Stylus 等 CSS 預處理器實現的。
CSS 預處理器的目的是開發擴展標準 CSS 基本功能的代碼。然後將該代碼編譯成標準 CSS 供瀏覽器理解，就像 TypeScript 如何與 JavaScript 一起工作一樣。
隨著 CSS 變量的發展，預處理器不再那麼重要，但如果在您的項目中與 CSS 變量結合使用，它們仍然可以提供一些用處。
您可以定義一個 SASS 變量$main-color並使用它來設置 CSS 變量的值。然後，在常規樣式類中使用 CSS 變量。
您還可以使用 SASS 函數來操作 CSS 變量的值。
例如：
:root {
--primary: $main-color;
--secondary: lighten(var(--primary), 20%);
}
.btn {
color: var(--primary);
background-color: var(--secondary);
}
在這裡，SASS 函數lighten()操縱–primary的值以獲得–secondary的值。
請注意，JavaScript 無法訪問 SASS 變量。所以如果你需要在運行時操作變量的值，你應該使用 CSS 變量。
結合使用 CSS 變量和預處理器，您可以同時利用這兩個好處，例如使用強大的預處理器功能（如循環和函數）和 CSS 變量功能（如 CSS 級聯）。
在 Web 開發中使用 CSS 變量的技巧
這裡有一些需要注意的重要提示，它們將幫助您更好地利用 CSS 變量。
從清晰的命名約定開始
為變量選擇一個易於理解和使用的命名約定。例如，使用諸如–color- 之類的前綴用於顏色變量或–spacing-用於間距變量。
在媒體查詢中使用變量
在媒體查詢中使用變量可以輕鬆地針對不同的屏幕尺寸調整您的設計。
利用 CSS 的級聯特性
請記住，CSS 變量是級聯的，這意味著如果您在父元素上設置變量，它將影響其所有子元素。
謹慎使用 CSS 變量
使用過多的 CSS 變量會導致混淆，因此請謹慎使用它們，並且僅在有意義並提高代碼可維護性時才使用。
測試你的變量
CSS 變量是在樣式表中編寫清晰且可維護代碼的獨特方式。
重要的是要注意它們仍未在所有瀏覽器上得到完全支持。因此，您應該測試您的變量的瀏覽器兼容性，以確保它們按預期工作，並且任何回退值都按您期望的那樣工作。
發佈留言