CSS-变量
什么是 CSS 变量
CSS变量的两种形式：
- 自定义属性
这些属性使用--name的特殊格式作为名字。例如--example: 20px即是一个 css 声明语句。意思是将 20px 赋值给--example变量。 - 变量
变量就是拥有合法标识符和合法的值,可以被使用在任意的地方。通过var()函数使用变量。例如：var(--example)会返回--example所对应的值
补充
:root是CSS伪类，匹配文档树的根元素。对于 HTML 来说，:root表示<html>元素，除了优先级更高之外，与 html 选择器相同。 所以我们一般把自定义属性写在:root{}里面，html标签里面的元素会继承它。- 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"对应的节点字体大小为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);
}
