什么是 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);
}