CSS 自定义变量 | 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的的第3天

一、问题提出

为什么记录这边笔记呢，起因在于今天再观看韩老师和月影老师的讲课视频时发现自己三件套学得东西还是太浅了，只知道基本的样式修改，正好最近也在做一个肤色切换的功能，顺便复习了一些CSS自定义变量的有关东西。

二、什么是CSS自定义变量

顾名思义就是由作者自己本身定义的变量，它包含的值可以在整个页面中重复使用且可以用自定义的属性来标记值。列如--bg-color:black，由var()函数来获取值。例如：var(--bg-color);

• 好处：当网站变得复杂时，会有大量的CSS代码，通常会有很多重复的值。如果，有一天要修改这些值的时候，会非常麻烦，而通过自定义变量的方式就可以，直接修改自定义变量的值从而修改全局的样式，这样使用起来就会方便很多~

三、举例

dom结构如下

<div class="box1">
   <div class="box2">
     <div class="box3"></div>
     <div class="box4"></div>
   </div>
</div>

1、用:root根伪类定义

:root {
  --bg-color: blue;
}

.box1 {
  background-color: var(--bg-color);
  height: 200px;
  width: 200px;
}

2、在其父元素上定义

.box2{
 --bg-color-two: orange;
}

.box3 {
  --bg-color-three: black;
}

.box1 {
  background-color: var(--bg-color-two);
  height: 200px;
  width: 200px;
}

.box2 {
  background-color: aquamarine;
  height: 100px;
  width: 100px;
}

.box3 {
  background-color: var(--bg-color-two);
  height: 50px;
  width: 50px;
}

.box4{
  background-color: var(--bg-color-three,green);
  height: 50px;
  width: 50px;
}

• 元素class="box2"：background-color:aquamarine;
• 元素class="box3"：background-color:orange;
• 元素class="box4"：background-color: green;无法调用兄弟自定义变量,但设置了默认值为green
• 元素class="box1"：非法值，会变成自定义属性的默认值

四、拓展

1、css切换肤色方案

dom结构

<label for="checkBox">change</label>
<input id="checkBox" type="checkbox">
<div class="header">css真好玩~</div>

:root {
  --bg-color: rgba(192, 34, 34, 0.899);
}
.header {
  height: 100px;
  color: #fff;
  background-color: var(--bg-color);
}
#checkBox:checked+.header {
  background-color: black;
  color: aquamarine;
  transition: all 0.5s;
}

2、js版本

dom结构

<div class="header">css真好玩~</div>
<input id="btn" type="bottun" value="Change">

<script>
    let rootStyle = getComputedStyle(document.documentElement);
    let varValue = rootStyle.getPropertyValue('--bg-color').trim()
    let isActice = false;

    document.getElementById("btn").addEventListener('click', function () {
      console.log(isActice)
      if (!isActice) {
        document.documentElement.style.setProperty('--bg-color', "black")
      } else {
        document.documentElement.style.setProperty('--bg-color', "rgba(192, 34, 34, 0.899)")
      }
      isActice = !isActice
    }, false)
 </script>

五、总结

以上就是两种简单的实现肤色切换的方式，实际使用还可以通过预处理器的方式来实现如less、scss等等~