什麼是 CSS 變量
CSS變量的兩種形式：
-
自定義屬性
這些屬性使用
--name
--example: 20px
--example
-
變量
變量就是擁有合法辨別符和合法的值,可以被使用在任意的地方。通過
var()
var(--example)
--example
補充
-
:root
:root
<html>
:root{}
- CSS 自定義屬性是可以級聯的：每一個自定義屬性可以多次出現，并且變量的值将會借助級聯算法和自定義屬性值運算出來。
- CSS 變量并不支援
!important
聲明變量
我們先寫一個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"
-
class="three"
-
class="four"
-
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);
}