初步使用

:root {

--main-color: #06c;

--accent-color: #006;

}

/* The rest of the CSS file */

#foo h1 {

//引用變量

color: var(--main-color);

}

以下使用方法錯誤！！！

他錯誤地嘗試使用變量名代替屬性名：

.foo {

--side: margin-top;

var(--side): 20px;

}

這并不能實現margin-top: 20px，會拋出語法錯誤。

大小寫敏感

盡管--FOO與--foo都是合法的變量，但是當你引用前者指代的就是前者的值，后者亦然。

h1 {

--font-color: lightblue;

--Font-color: lightgreen;

color: var(--Font-color);

//lightgreen

}

設置值的注意事項

自定義屬性可以以!important結尾, 但是CSS解析器會自動移除這個屬性的值，并按瀑布流的形式確定其優先屬性。換句話說，雖然可以使用!important,但是頂級優先“!”的禁止其它同類CSS生效的作用并沒有實現CSS。

h1 {

--font-color: lightblue!important;

--Font-color: lightgreen;

color: var(--font-color);

color: var(--Font-color);

//lightgreen

}

繼承性與優先級(可正常理解)

:root { --color: blue; }

div { --color: green; }

#alert { --color: red; }

* { color: var(--color); }

I inherited blue from the root element!

//blueI got green set directly on me! //green

While I got red set directly on me! //red

I’m red too, because of inheritance!

//red

可與正常屬性混用

:root {

--main-color: #c06;

--accent-background: linear-gradient(to top, var(--main-color), white);

}

互相調用無效

body {

font-size: 16px;

}

//h1最終大小為16px

h1 {

--font-color: lightblue!important;

--Font-color: lightgreen;

--one: calc(var(--two) + 30px);

--two: calc(var(--one) - 50px);

color: var(--font-color);

color: var(--Font-color);

font-size: var(--one);

}

在不同范圍內合法，事實上兩者在不同范圍內指代了不同的變量

one { --foo: 10px; } //10

two { --bar: calc(var(--foo) + 10px); } //20

three { --foo: calc(var(--bar) + 10px); } //30

calc()使用通用的數學運算規則，但是也提供更智能的功能：

使用“+”、“-”、“*” 和 “/”四則運算；

可以使用百分比、px、em、rem等單位；

可以混合使用各種單位進行計算；

表達式中有“+”和“-”時，其前后必須要有空格，如"widht: calc(12%+5em)"這種沒有空格的寫法是錯誤的；

表達式中有“*”和“/”時，其前后可以沒有空格，但建議留有空格。

變量初始默認值

.component .header {

color: var(--header-color, blue);

}

.component .text {

color: var(--text-color, black);

}

/* In the larger application’s style: */

.component {

--text-color: #080;

/* header-color 為默認值blue

注： var(--header-color, blue， red)無效

*/

}

變量的替換使用規范

var()并不是按照原文替換CSS字符

.foo {

--gap: 20;

margin-top: var(--gap)px;

}

這無法設置margin-top: 20px;(a length),而是等同于margin-top: 20 px; (a number followed by an ident空格),這是一個不合法的屬性值. 不過, calc()可以實現:

.foo {

--gap: 20;

margin-top: calc(var(--gap) * 1px);

}

下面的代碼從語法上江是無錯誤的，但是并無實際效果。因為20px并不是一個背景色的有效值，如果沒有其他設置(必須優先級高于這里的設置)或繼承的背景色，將會使用全局默認的透明背景色。

:root { --not-a-color: 20px; }

p { background-color: red; }

p { background-color: var(--not-a-color); }

//這里雖然有背景色的設置但是優先級并沒有自定義屬性的高，故而`p`的背景色是透明色

總結

以上是生活随笔為你收集整理的css的属性是变量是怎么表达,CSS自定义变量属性——像less，sass那样在css中使用变量（译）...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。