CSS基礎 使用CSS變數

2021-10-02 07:51:26 字數 752 閱讀 7093

當我們在開發較大的css檔案時,會遇到使用重複變數的情況,此時可以使用css變數來簡化開發,具體看**示例。

// 宣告css變數

element

// 使用css變數

element

這裡使用mdn的例子進行說明

.one

.two

.three

.four

.five

我們可以看到上述**中都重複用到了 background-color, 並且對應的值都相同,此時就可以用css變數來簡化開發。

:root

.one

.two

.three

.four

.five

可以看到我們使用:boot來定義全域性變數::boot一般可以認為是html因為css變數有作用範圍與繼承性,即在element1中定義的css變數只能用於element1及其子類的css規則中,所以我們獎css變數定義在:boot中,就可以在全文應用css變數,這也是我們的一般用法。

using css custom properties (variables)

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

css使用變數 您是否曾經不得不編寫大量css,卻迷失了自己的 如果您像我一樣,有時您必須將顏色或文字大小的十六進製制 儲存在可以訪問和重複使用的位置。在本文中,我將分享有關如何使用css變數優化css的知識。css變數是我們定義的值,可在整個css文件中重複使用。css變數 也稱為自定義屬性 在乙...

Css 變數使用方法

doctype html en utf 8 viewport content width device width,initial scale 1.0 document title root 全域性定義 root 使用方法 myvarible after可以在元素的後面加入內容 myvarible ...

css 冷知識 css變數

css變數的宣告 變數名前加兩根連線詞 body 各種值都可以放入css變數 變數名大小寫敏感 變數讀取 var 函式 body var 函式可以使用第二個引數,表示變數的預設值。如果該變數不存在,就會使用這個預設值 color var foo,ccc var 函式也可以用在變數的宣告 body 注...