根底用法

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. 须要在运行时，动静扭转属性的我的项目，如主题更改等