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 注意,規則集所指定的選擇器定義了自定義屬性的可...