css使用變數 使用CSS變數優化CSS長度

2021-10-07 23:39:58 字數 1806 閱讀 9063

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