初步使用

:root {

--main-color: #06c;

--accent-color: #006;

}

/* The rest of the CSS file */

#foo h1 {

//引用變量

color: var(--main-color);

}

以下使用方法錯(cuò)誤！！！

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

.foo {

--side: margin-top;

var(--side): 20px;

}

這并不能實(shí)現(xiàn)margin-top: 20px，會(huì)拋出語(yǔ)法錯(cuò)誤。

大小寫(xiě)敏感

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

h1 {

--font-color: lightblue;

--Font-color: lightgreen;

color: var(--Font-color);

//lightgreen

}

設(shè)置值的注意事項(xiàng)

自定義屬性可以以!important結(jié)尾, 但是CSS解析器會(huì)自動(dòng)移除這個(gè)屬性的值，并按瀑布流的形式確定其優(yōu)先屬性。換句話說(shuō)，雖然可以使用!important,但是頂級(jí)優(yōu)先“!”的禁止其它同類CSS生效的作用并沒(méi)有實(shí)現(xiàn)CSS。

h1 {

--font-color: lightblue!important;

--Font-color: lightgreen;

color: var(--font-color);

color: var(--Font-color);

//lightgreen

}

繼承性與優(yōu)先級(jí)(可正常理解)

: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);

}

互相調(diào)用無(wú)效

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);

}

在不同范圍內(nèi)合法，事實(shí)上兩者在不同范圍內(nèi)指代了不同的變量

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

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

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

calc()使用通用的數(shù)學(xué)運(yùn)算規(guī)則，但是也提供更智能的功能：

使用“+”、“-”、“*” 和 “/”四則運(yùn)算；

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

可以混合使用各種單位進(jìn)行計(jì)算；

表達(dá)式中有“+”和“-”時(shí)，其前后必須要有空格，如"widht: calc(12%+5em)"這種沒(méi)有空格的寫(xiě)法是錯(cuò)誤的；

表達(dá)式中有“*”和“/”時(shí)，其前后可以沒(méi)有空格，但建議留有空格。

變量初始默認(rèn)值

.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 為默認(rèn)值blue

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

*/

}

變量的替換使用規(guī)范

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

.foo {

--gap: 20;

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

}

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

.foo {

--gap: 20;

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

}

下面的代碼從語(yǔ)法上江是無(wú)錯(cuò)誤的，但是并無(wú)實(shí)際效果。因?yàn)?0px并不是一個(gè)背景色的有效值，如果沒(méi)有其他設(shè)置(必須優(yōu)先級(jí)高于這里的設(shè)置)或繼承的背景色，將會(huì)使用全局默認(rèn)的透明背景色。

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

p { background-color: red; }

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

//這里雖然有背景色的設(shè)置但是優(yōu)先級(jí)并沒(méi)有自定義屬性的高，故而`p`的背景色是透明色

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。