什么是 CSS 變量
CSS變量的兩種形式：
- 自定義屬性
這些屬性使用--name的特殊格式作為名字。例如--example: 20px即是一個 css 聲明語句。意思是將 20px 賦值給--example變量。 - 變量
變量就是擁有合法標識符和合法的值,可以被使用在任意的地方。通過var()函數使用變量。例如：var(--example)會返回--example所對應的值
補充
:root是CSS偽類，匹配文檔樹的根元素。對於 HTML 來說，:root表示<html>元素，除了優先級更高之外，與 html 選擇器相同。 所以我們一般把自定義屬性寫在:root{}里面，html標簽里面的元素會繼承它。- CSS 自定義屬性是可以級聯的：每一個自定義屬性可以多次出現，並且變量的值將會借助級聯算法和自定義屬性值運算出來。
- CSS 變量並不支持
!important聲明，注意只是聲明。 - 沒有CSS變量這一說，請描述為CSS自定義屬性。
聲明變量
我們先寫一個demo
<body>
<section id="container">
<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>
<div class="item4"></div>
</section>
</body>
#container {
width: 400px;
height: 150px;
background-color: #ffeead;
border: 1px solid #666;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
}
#container > div {
width: 70px;
height: 50px;
}
#container div:nth-child(2n) {
background-color: lightgreen;
}
#container div:nth-child(2n+1) {
background-color: lightpink;
}
接下來使用css變量，修改部分代碼
:root {
--green: lightgreen;
--lightpink: lightpink;
}
#container div:nth-child(2n) {
background-color: var(--green);
}
#container div:nth-child(2n+1) {
background-color: var(--lightpink);
}
實現了相同的效果。
CSS 變量的繼承
<div class="one">
<div class="two">
<div class="three"></div>
<div class="four"></div>
<div></div>
</div>
</div>
.one {
font-size: var(--font-size)
}
.two {
--font-size: 12px;
font-size: var(--font-size)
}
.three {
--font-size: 14px;
font-size: var(--font-size)
}
.four {
font-size: var(--font-size)
}
在這個例子中：
class="two"對應的節點字體大小為12pxclass="three"對應的節點字體大小為14pxclass="four"對應的節點字體大小為12px (繼承了父節點)class="one"對應的節點字體大小為無效值, 即此屬性值為未被自定義
CSS 層級變量
📌局部變量會在作用范圍內覆蓋全局變量。
:root {
--green: lightgreen;
--lightpink: lightpink;
}
#container div:nth-child(2n) {
background-color: var(--green);
}
#container div:nth-child(2n+1) {
background-color: var(--lightpink);
}
.item1 {
--green: black;
background-color: var(--green) !important; /*選擇器權重 100+10>10 所以加了!important*/
}
使用多個變量
:root{
--green: lightgreen;
--lightpink: lightpink;
--word1: "are";
--word2: "you";
--word3: "ok";
}
.item2::before {
content: var(--word1) " " var(--word2) " " var(--word3);
}
