css使用變數
您是否曾經不得不編寫大量css，卻迷失了自己的**？ 如果您像我一樣，有時您必須將顏色或文字大小的十六進製制**儲存在可以訪問和重複使用的位置。 在本文中，我將分享有關如何使用css變數優化css的知識。 css變數是我們定義的值，可在整個css文件中重複使用。 css變數（也稱為自定義屬性）在乙個位置設定並在許多位置引用，就像您將設定變數並以其他程式語言引用一樣。
宣告乙個自定義變數
這裡的要點是如何宣告變數以及如何訪問它們。 css中的變數是通過以兩個破折號開頭，後跟變數名稱來定義的。 這是乙個如何在css中宣告自定義變數的示例。
:root在根選擇器中設定變數非常有用，因為它使我們能夠訪問整個文件。 我們可以在選擇器中定義它，但是它將僅對該選擇器可用，這將無用。
如何使用自定義變數？
定義自定義變數後，我們下一步可以在**的另一部分中使用它。 要使用自定義變數，我們使用關鍵字var（）。
.menu我們用於訪問自定義變數的var關鍵字有兩個引數。 第乙個是要替換的定製屬性的名稱，第二個是後備值，當引用的定製屬性無效時使用該值。
.menu無效的屬性和後備
如下面的示例中所示，當我們替換無效的屬性時，將使用該屬性的初始值或繼承的值。
:root
....author
....author-tag
具有.author-tag類的元素的顏色將為紅色，因為提供給var的屬性無效。
下面我們有乙個使用css自定義變數且不包含css自定義變數的示例。 編寫的**行數大大減少了。
具有自定義屬性css
:root
body
.menu
.menu ul
.menu ul li
.welcome h1
.author
.author img
.author-tag
button
button :hover
.php
.ruby
.js
.react
沒有自定義屬性css
:root
body
.menu
.menu ul
.menu ul li
.welcome h1
.author
.author img
.author-tag
button .php
button .ruby
button .js
button .react
.php :hover
.ruby :hover
.js :hover
.react :hover
當我們充分利用custom屬性時，我們可以減小css檔案的大小。 它還可以簡化大型文件之間的訪問和更改。 使用值就像引用屬性名稱一樣容易。
css變數幾乎無濟於事，但是，由於css變數是css的一部分，因此您無需安裝任何程式即可使用它。
翻譯自:css使用變數
CSS基礎 使用CSS變數
當我們在開發較大的css檔案時，會遇到使用重複變數的情況，此時可以使用css變數來簡化開發，具體看 示例。宣告css變數 element 使用css變數 element 這裡使用mdn的例子進行說明 one two three four five 我們可以看到上述 中都重複用到了 backgroun...
Css 變數使用方法
doctype html en utf 8 viewport content width device width,initial scale 1.0 document title root 全域性定義 root 使用方法 myvarible after可以在元素的後面加入內容 myvarible ...
Vue使用css變數更換主題色
使用css變數更換主題色。一般會提供幾個主題色供使用者選擇，或者直接使用拾色器讓使用者選擇喜歡的顏色。宣告乙個自定義屬性，屬性名需要以兩個減號 開始，屬性值則可以是任何有效的css值。和其他屬性一樣，自定義屬性也是寫在規則集之內的，如下 element 注意，規則集所指定的選擇器定義了自定義屬性的可...