根底用法
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 变量比拟
- 有作用域
- js 可操作
- 可继承
- 不须要编译
应用场景
- 没有编辑环境的我的项目
纯动态页面,然而须要对立色彩,字体,字体大小,字重等,能够应用 css 变量,不便对立批改
- 须要在运行时,动静扭转属性的我的项目,如主题更改等