CSS-变量

什么是 CSS 变量

CSS变量的两种形式：

• 自定义属性
  这些属性使用--name的特殊格式作为名字。例如--example: 20px即是一个 css 声明语句。意思是将 20px 赋值给--example变量。
• 变量
  变量就是拥有合法标识符和合法的值,可以被使用在任意的地方。通过var()函数使用变量。例如：var(--example)会返回--example所对应的值

补充

• :root 是CSS伪类，匹配文档树的根元素。对于 HTML 来说，:root 表示 元素，除了优先级更高之外，与 html 选择器相同。 所以我们一般把自定义属性写在:root{}里面，html标签里面的元素会继承它。
• CSS 自定义属性是可以级联的：每一个自定义属性可以多次出现，并且变量的值将会借助级联算法和自定义属性值运算出来。
• CSS 变量并不支持 !important 声明，注意只是声明。
• 没有CSS变量这一说，请描述为CSS自定义属性。

声明变量

我们先写一个demo

#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 变量的继承

.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" 对应的节点字体大小为12px
• class="three" 对应的节点字体大小为14px
• class="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);
}