css自定义属性

基础用法

1.定义

css自定义属性又称css变量，与其他编程语言变量一样，让css有了编程能力。

2.声明与使用

使用：需使用两个减号(--)开头，其他与变量定义规则一致，大小写敏感。

:root {
  --color: red;
}

使用：使用时用var()函数包裹。

div {
  color: var(--color)
}

3 变量未定义和错误定义

如果我们使用的变量未定义，则使用后面的值作为属性值

body {
  background: var(--bg-color, black)
}

如果我们使用的变量定义错误，则属性会使用缺省值

body {
  --bg-color: 20px;
  background: var(--bg-color, black)
}

上面我们定义了 --bg-color，但是background的属性值不匹配，所以最后body的background的值是其缺省值 transparent

继承和作用域

作用域

css变量有全局作用域与局部作用域的区分，定义在:root里的为全局作用域，整个文档都能访问。定义在某个标签内的为这个标签内的局部变量，外部不能访问。

:root {
  --color: red // 全局css变量 --color
}
.box {
  --color: blue // 局部变量 --color
}
body {
  // 因为body无法访问box里定义的--color，所以最后生效的值为 red
  color: var(--color) 
}

继承

<div class="wrap">
  <div class="content1">content1</div>
  <div class="content2">content2</div>
</div>
<style>
  .wrap {
    --color: red;
  }
  .content1 {
    // 此标签内部定义了--color，所以最后color值为blue
    --color: blue;
    color: var(--color)
  }
  .content2 {
    // 此标签未定义css变量 --color,继承父级的--color，所有最后color值为red
    color: var(--color)
  }
</style>

js操作自定义属性

:root {
  --color: red;
}

let root = document.documentElement

// 读取
let rootStyle = window.getComputedStyle(root);
let colorVar = rootStyle.getPropertyValue('--color').trim();
console.log(colorVar)

// 改变
root.style.setProperty('--color', 'blue')
console.log(colorVar)

// 删除
root.style.removeProperty('--color')
console.log(colorVar)

与sass变量比较

1. 有作用域
2. js可操作
3. 可继承
4. 不需要编译

使用场景

1. 没有编辑环境的项目

   纯静态页面，但是需要统一颜色，字体，字体大小，字重等，可以使用css变量，方便统一修改

2. 需要在运行时，动态改变属性的项目，如主题更改等