学习笔记-原生CSS变量

原生CSS变量

不用Less、Sass等预处理插件，原生的CSS也支持变量，用于批量修改逻辑相关的DOM的Style的某一个属性值

• 语法
• 示例

---

语法

• 定义变量
  与js一样，变量都是由作用域的，css变量的作用域就是DOM的层级关系，定义在某一选择器内，变量名称以–开头，值与普通属性值一样，类似’20px’ ‘red’

:root {
    --color: red
}

在文档的根元素的作用域范围内定义了名为–color的变量，值为red，在html元素包裹内的任意元素都可使用–color变量，变量是可以被继承的。同时多重变量申明，变量的作用域也受选择器优先级的影响。

        div {
            --color: red;
            background-color: var(--color);
            width: 200px;
            height: 200px;
        }
        
        .class1 {
            --color: black;
            background-color: var(--color);
            width: 100px;
            height: 100px;
        }
        
        #id1 {
            --color: green;
            background-color: var(--color);
            width: 50px;
            height: 50px;
        }
      <div>
        <span>div</span>
        <div class="class1">class1</div>
        <div id="id1">id1</div>
    </div>

• 使用变量
  : 无单位符号 利用var计算

background-color: var(--color);

: 有单位符号

 --size: 20px;//有单位
 font-size:var(--size);//直接var

 --size: 20;//无单位
 font-size: calc(var(--size) * 1px);//calc  注意var(--size) * 1px

• 修改变量
  元素的style属性是js中的对象，读取和修改对象的属性方法相同

  e.target.style.setProperty('--x', `${ x }px`)//设置--x
 let v= e.target.style.getProperty('--y')//读取--y
 

示例

• 按钮颜色

• 控制颜色和旋转

参考源码https://github.com/cumthyb/FrontEndFoundation/tree/master/CSS变量