在我對 CSS 變數的探索中，我發現了許多令人興奮的潛力和微妙的細節，這些細節乍看之下並不總是顯而易見。和許多開發人員一樣，我最初以簡單、直接的方式使用 CSS 變量，很少遇到邊緣情況。這種方法對於許多用途來說都很常見且有效，但這意味著還有很多東西需要探索和實驗。在我看來，更深入了解 CSS 變數命名規則和有效的賦值可以顯著擴展其應用的範圍和靈活性。
我在這裡整理了我的研究和見解，旨在提供對 CSS 變數更徹底和全面的了解。我希望這篇文章能夠成為幫助您和我自己釋放 CSS 變數的全部潛力並發現樣式的新可能性的資源。
本系列假設您已經熟悉CSS 變數的基礎知識，例如--name: value 語法和var(--name) 函數，或您熟悉基本概念本CSS 變數簡介的前三分之一介紹了。
使用 CSS 變數時，命名是第一步。以下是命名 CSS 變數的一些關鍵準則：
所有自訂屬性名稱必須以兩個連字元 (--) 開頭，例如 --main-color。此前綴有助於瀏覽器區分自訂屬性和原生 CSS 屬性，減少衝突的機會。
CSS 自訂屬性名稱區分大小寫，這表示 --main-color 和 --Main-Color 被視為兩個完全不同的變數。在整個程式碼中保持大小寫一致非常重要，以避免錯誤地引用大小寫不匹配的變量，這可能導致解析錯誤。
範例：
:root {
--main-color: blue;
--Main-Color: red; /* Case difference, treated as a separate property */
}
.box1 {
color: var(--main-color); /* Refers to --main-color, resulting in blue */
}
.box2 {
color: var(--Main-Color); /* Refers to --Main-Color, resulting in red */
}
獨立的 -- 被保留，並且在未來的規範中可能有特定的用途。因此，請避免將其用作自訂屬性名稱。
範例：
:root {
--: green; /* Invalid: a standalone -- is reserved */
--custom-color: green; /* Valid: custom property avoids reserved name */
}
.text {
color: var(--custom-color); /* Uses the custom property */
}
命名 CSS 變數時，考慮允許的字元和約定至關重要，這可以提高可讀性並防止衝突。
範例
下面的範例示範了 CSS 變數命名的靈活性以及如何正確處理特殊字元：
:root {
--main-color: blue;
--Main-Color: red; /* Case difference, treated as a separate property */
}
.box1 {
color: var(--main-color); /* Refers to --main-color, resulting in blue */
}
.box2 {
color: var(--Main-Color); /* Refers to --Main-Color, resulting in red */
}
CSS變數可以保存各種類型的值，但它們也需要遵循特定的語法規則。讓我們來看一些有效賦值的範例：
:root {
--: green; /* Invalid: a standalone -- is reserved */
--custom-color: green; /* Valid: custom property avoids reserved name */
}
.text {
color: var(--custom-color); /* Uses the custom property */
}
如這些範例所示，CSS 變數支援多種值。但是，由於 CSS 變數是 CSS 屬性的一部分，因此它們必須遵循通用 CSS 語法，例如匹配引號和括號。讓我們來探索一些不滿足這些要求的值。
為CSS變數分配無效值可能會導致解析錯誤，這可能會導致後續樣式出現問題。以下是一些無效賦值的範例：
:root {
/* Naming with Unicode characters */
--primary-color: #3498db;
--secondary-color: #e74c3c;
/* Using an Emoji as a variable name */
--?: #2ecc71;
/* Special characters with escape sequences, resulting in --B&W? */
--B\&W\?: #2ecc72;
/* Using Unicode escape codes, equivalent to --B&W? */
--BWF: #abcdef;
}
.container {
color: var(--BWF); /* Result is #abcdef */
}
.container-alt {
color: var(--B\&W\?); /* Result is #abcdef */
}
CSS 變數與其他 CSS 屬性一樣，支援 !important 標誌，該標誌會影響優先權。下面的範例展示了 !important 如何影響變數優先權：
:root {
--foo: if(x > 5) this.width = 10;
--string-with-semicolon: "font-size: 16px;"; /* Strings can include semicolons */
--complex-calc: calc(100% / 3 + 20px); /* Complex calculations with calc() */
--negative-value: -10px; /* Negative values */
--multiple-values: 10px 20px 30px 40px; /* Multiple values, e.g., for margin or padding */
--unitless-number: 1.5; /* Unitless numbers */
--nested-var: var(--string-with-semicolon); /* Nested variables using var() */
--empty-string: ; /* Empty string */
--color: rgba(255, 0, 0, 0.5); /* Color functions */
--special-chars: "Content: \"Hello\""; /* Strings with special characters */
}
在此範例中，#target 和 .cls 都會影響 div 上的 --text-color 變數。根據選擇器的特殊性，#target 應覆蓋 .cls。但是，由於 .cls 中的 --text-color 使用 !important，因此應用於 div 的最終顏色將為綠色。需要注意的是，!important 僅影響變數之間的優先級，不會傳播到引用該變數的屬性。最終的顏色只是綠色，而不是綠色！重要。
:root {
--main-color: blue;
--Main-Color: red; /* Case difference, treated as a separate property */
}
.box1 {
color: var(--main-color); /* Refers to --main-color, resulting in blue */
}
.box2 {
color: var(--Main-Color); /* Refers to --Main-Color, resulting in red */
}
使用initial作為CSS變數值是一種獨特的行為。當分配給變數時，initial 使該變數無效，導致使用 var() 存取時失敗。這與空值 (--empty: ;) 不同，空值不會導致屬性無效。使用初始有效地「重置」變量，取消其定義。 （參考）
CSS變數支援引用其他變量，但是如果發生依賴循環，則循環中的所有變數都會失效。這是一個依賴循環的範例：
:root {
--: green; /* Invalid: a standalone -- is reserved */
--custom-color: green; /* Valid: custom property avoids reserved name */
}
.text {
color: var(--custom-color); /* Uses the custom property */
}
在此範例中，--one、--two 和 --third 相互引用，建立一個循環。結果，由於循環依賴，所有三個變數都變得無效，從而阻止它們解析。 （參考）
在本文中，我們深入研究了 CSS 變數的命名和賦值規則，介紹如何正確定義和管理這些變量，同時避免常見的解析錯誤。有了這些基礎知識，您應該能夠在未來的開發專案中更有效地使用 CSS 變數。
下一篇文章將探討如何使用 var() 檢索 CSS 變數值，以及具體的應用場景，讓您對 CSS 變數的使用更加靈活和強大。
以上是關於 CSS 變數你可能不知道的事情 - 命名規則和賦值的詳細內容。更多資訊請關注PHP中文網其他相關文章！
