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" 对应的节点字体大小为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);
}

posted @ 2019-03-15 11:47  guangzan  阅读(3622)  评论(2)  编辑  收藏  举报