什麼是 CSS 變量以及如何使用它們
已發表: 2022-02-16在為您的站點編寫 CSS 代碼時，您可以利用 CSS 自定義屬性（變量）來加快開發過程。 您可以使用變量來定義屬性（大小、顏色），然後可以將其應用於多個元素。
這樣，就可以更好地控制代碼和設計。 在一個地方改變一個變量的值會覆蓋在任何地方調用它的那個屬性的值。
這篇文章將解釋如何使用 CSS 變量和一些實際應用。
開始吧！
聲明一個變量
變量可以具有全局或局部範圍。 要全局定義變量，請使用 :root 選擇器。
:root { --base-font-size: 1.1rem; } 在彈出窗口中打開
:root { --base-font-size: 1.1rem; }:root選擇器匹配文檔的根，在我們的特定情況下是<html> 。
要聲明 CSS 自定義屬性（變量），請從兩個破折號 (--) 開始。 變量區分大小寫，例如：
--base-font-size和--Base-Font-Size是兩個不同的變量。
要在本地定義變量，請使用要在其中使用變量的元素的選擇器。
#first-container { --background: #ccc; } 在彈出窗口中打開
#first-container { --background: #ccc; }一旦定義了變量，就需要調用它。
var() 函數
var()函數用於插入定義的 CSS 變量的值。 該函數將自身替換為變量的值。 我們來看一個例子：
HTML 代碼
- 將此代碼複製並粘貼到您的代碼編輯器中。
- 將文件另存為index.html 。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="/style.css"> <title>CSS Variables</title> </head> <body> <div class="wrapper"> <div class="container-1"> <p class="first">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste doloribus dolorum eaque veritatis quia quod?</p> <button type="button">Click here!</button> </div> <div class="container-2"> <p class="second">Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero, dolorem. Reprehenderit mollitia quos quia qui.</p> <button type="button">Click here!</button> </div> <div class="container-3"> <p class="third">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi dolor reprehenderit, ad sunt aperiam officiis!</p> <button type="button">Click here!</button> </div> </div> </body> </html> 在彈出窗口中打開
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="/style.css"> <title>CSS Variables</title> </head> <body> <div class="wrapper"> <div class="container-1"> <p class="first">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste doloribus dolorum eaque veritatis quia quod?</p> <button type="button">Click here!</button> </div> <div class="container-2"> <p class="second">Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero, dolorem. Reprehenderit mollitia quos quia qui.</p> <button type="button">Click here!</button> </div> <div class="container-3"> <p class="third">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi dolor reprehenderit, ad sunt aperiam officiis!</p> <button type="button">Click here!</button> </div> </div> </body> </html>
CSS 代碼
- 創建一個名為style.css的文件（在index.html的同一目錄中）。
- 粘貼下面的代碼並保存文件。
/* Global styles */ .wrapper, div { padding: 1rem; } div { margin: 1rem auto; } /* DEFINITION OF VARIABLES */ :root { /* Color palette */ --primary: #007bff; --success: #28a745; --warning: #ffc107; --white: #f9f9f9; --light-grey: #d8d8d8; /* Borders */ /* It is possible to use an already declared variable within the definition of another variable */ --border-primary: 1px solid var(--primary); --border-success: 1px solid var(--success); --border-warning: 1px solid var(--warning); } /* VARIABLES */ /* Wrapper */ .wrapper { background-color: var(--light-grey); } /* First Container */ .container-1 { /* The var() function replaces itself with the value of the variable */ border: var(--border-primary); color: var(--primary); background-color: var(--white); } .container-2 { /* The var() function replaces itself with the value of the variable */ border: var(--border-success); color: var(--success); background-color: var(--white); } .container-3 { /* The var() function replaces itself with the value of the variable */ border: var(--border-warning); color: var(--warning); background-color: var(--white); } .container-1 button { background-color: var(--primary); color: var(--white); } .container-2 button { background-color: var(--success); color: var(--white); } .container-3 button { background-color: var(--warning); color: var(--white); }< button {
border-radius: 5px; } 在彈出窗口中打開
/* Global styles */ .wrapper, div { padding: 1rem; } div { margin: 1rem auto; } /* DEFINITION OF VARIABLES */ :root { /* Color palette */ --primary: #007bff; --success: #28a745; --warning: #ffc107; --white: #f9f9f9; --light-grey: #d8d8d8; /* Borders */ /* It is possible to use an already declared variable within the definition of another variable */ --border-primary: 1px solid var(--primary); --border-success: 1px solid var(--success); --border-warning: 1px solid var(--warning); } /* VARIABLES */ /* Wrapper */ .wrapper { background-color: var(--light-grey); } /* First Container */ .container-1 { /* The var() function replaces itself with the value of the variable */ border: var(--border-primary); color: var(--primary); background-color: var(--white); } .container-2 { /* The var() function replaces itself with the value of the variable */ border: var(--border-success); color: var(--success); background-color: var(--white); } .container-3 { /* The var() function replaces itself with the value of the variable */ border: var(--border-warning); color: var(--warning); background-color: var(--white); } .container-1 button { background-color: var(--primary); color: var(--white); } .container-2 button { background-color: var(--success); color: var(--white); } .container-3 button { background-color: var(--warning); color: var(--white); }< button {
border-radius: 5px; } 
這裡有一些注意事項：
- 創建調色板是一個簡單的過程。
- 可以在另一個變量的定義中使用一個變量，例如邊界變量定義中的顏色。
- 變量是繼承的，.container-* 元素的顏色屬性會影響其直接子元素。 在這種情況下，<p> 元素。
要覆蓋變量，您可以在其容器中聲明它，使其更加具體。
- 編輯CSS 代碼：
button { border-radius: 5px; /* Overriding a global variable */ --primary: #021b35; } 在彈出窗口中打開
button { border-radius: 5px; /* Overriding a global variable */ --primary: #021b35; } 
變量和媒體查詢
變量也可以在 CSS 媒體查詢中被繼承和覆蓋。
- 將此代碼添加到變量中：
:root { /* Color palette */ --primary: #007bff; --success: #28a745; --warning: #ffc107; --white: #f9f9f9; --light-grey: #d8d8d8; /* Borders */ /* It is possible to use an already declared variable within the definition of another variable */ --border-primary: 1px solid var(--primary); --border-success: 1px solid var(--success); --border-warning: 1px solid var(--warning); /* Width of the wrapper 1000px / 90% on smaller devices */ --wrapper-width: 1000px; } 在彈出窗口中打開
:root { /* Color palette */ --primary: #007bff; --success: #28a745; --warning: #ffc107; --white: #f9f9f9; --light-grey: #d8d8d8; /* Borders */ /* It is possible to use an already declared variable within the definition of another variable */ --border-primary: 1px solid var(--primary); --border-success: 1px solid var(--success); --border-warning: 1px solid var(--warning); /* Width of the wrapper 1000px / 90% on smaller devices */ --wrapper-width: 1000px; }我們已經為包裝元素定義了一個基本寬度。 我們現在可以將這些變量應用於 .wrapper 寬度屬性。
- 將此代碼添加到 CSS 文件的末尾：
.wrapper { width: var(--wrapper-width);
margin: 0 auto; } 在彈出窗口中打開
.wrapper { width: var(--wrapper-width);
margin: 0 auto; }
為了為屏幕寬度小於 1100 像素的設備定義媒體查詢，我們編寫了以下媒體查詢。
- 編輯CSS 代碼：
@media screen and (max-width: 1100px) { .wrapper { --wrapper-width: 90%; } } 在彈出窗口中打開
@media screen and (max-width: 1100px) { .wrapper { --wrapper-width: 90%; } }
媒體查詢中的新變量定義覆蓋了它的值。 另請注意，該變量在 DOM 中可用，這意味著可以使用 JS 檢索和操作它。 這對於 CSS 預處理器中的變量是不可能的。
概括
變量對於組織和管理少量和大量的 CSS 很有用。 它們減少了重複，從而防止了錯誤。 CSS 變量是動態的，這意味著它們可以在運行時更改。 使用 CSS 變量動態地為站點或應用程序設置主題很容易。 它們提供了為具有自定義名稱的 CSS 屬性分配值的能力。 變量遵循標準的級聯規則，因此可以在不同的特異性級別定義相同的屬性。
我希望你喜歡這個教程。 謝謝閱讀！