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