css变量
- 由作者自己定义的css属性,(比如:
--main-color: black;
)。 - 可以在整个文档中重复使用。
- css变量遵循级联,会从父级继承它们的值。
- 由
var()
函数来获取值(比如:color: var(--main-color);
) - 可以降低维护成本,增加页面高性能,减少代码体积。
变量声明和获
变量的声明语法是:--*
,变量使用语法是:var(--*)
。*
代表变量名称。
:root{
--main-color: #4d4e53;
}
:root
伪类在文档根节点设置属性,相当于全局添加了这个变量。
body {
background-color: var(--main-color);
}
通过var()
获取值,给属性设置样式。
注意
- 自定义变量名中不能包含
$,[ ,^,(,%
等字符。但是可以是包含中文等文字格式。
body {
--深蓝: #369;
background-color: var(--深蓝);
}
- 自定义变量只能在
声明块{}
里面,否则无效。 - 变量名大小写敏感,
--h
和--H
是两个不同变量。 - 当存在多个同样名称的变量时候,变量的覆盖规则由CSS选择器的权重决定的。CSS 变量并不支持
!important
声明。 var()
语法为:var( <自定义属性名> [, <默认值> ]? )
,当使用时变量无效,会直接获得默认值。默认值可以设置多个,都以前一个是否有效为准。
.a {
color: var(--my-var, red);
}
.b {
color: var(--my-var, var(--my-color), red);
}
- CSS变量的空格尾随特性。
body {
--size: 20;
font-size: var(--size)px;
}
这样是无效的,因为取值后默认在后面添加了个空格。相当于font-size: 20 px;
。
- 变量间可以相互传递
body {
--columns: 4;
--margins: calc(24px / var(--columns));
}
常用方式
响应式布局使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style type="text/css">
:root {
--connt: 2;
--background: #009688;
--margins: 30px;
--height: 150px;
}
body {
--深蓝: #369;
background-color: var(--深蓝);
width: 100%;
}
.cell {
width: calc(((100% - (var(--margins) * 4)) / var(--connt)));
margin: var(--margins);
background-color: #f0f3f9;
float: left;
}
.cell-header {
background: var(--background);
}
.cell-title {
color: var(--color,#fff);
}
.cell-content {
height: var(--height);
}
@media screen and (max-width: 600px) {
:root {
--connt: 1;
--background: #9C27B0;
--height:300px;
--color:#000000;
}
}
</style>
</head>
<body>
<div class="cell">
<header class="cell-header">
<div class="cell-title">标题</div>
</header>
<main class="cell-content">会看到布局发生了变化</main>
</div>
<div class="cell">
<header class="cell-header">
<div class="cell-title">标题</div>
</header>
<main class="cell-content">会看到布局发生了变化</main>
</div>
<script type="text/javascript"></script>
</body>
</html>
利用这个特点,可以在响应式布局的media命令里面声明变量,使得不同的屏幕宽度有不同的变量值。
JavaScript 操作 CSS 变量
- 检查浏览器是否支持CSS 变量。
const isSupported = window.CSS && window.CSS.supports && window.CSS.supports('--a', 0);
- JavaScript 操作 CSS 变量。
// 查看所有设置的属性 包括css变量
document.styleSheets
// 注意不能直接使用getPropertyValue()获取 css设置好的 css变量, 只有设置了变量才能获取对应变量的值。
// 设置值 变量值
document.body.style.setProperty('--connt', '1');
// 获取变量值
document.body.style.getPropertyValue('--connt')
// 获取变量值
document.body.style.removeProperty('--connt')
<script type="text/javascript">
var cssBol = true;
function onCSS(){
if(cssBol){
document.body.style.setProperty('--connt', '1');
document.body.style.setProperty('--background', '#9C27B0');
document.body.style.setProperty('--height', '200px');
cssBol = false;
}else{
document.body.style.setProperty('--connt', '2');
document.body.style.setProperty('--background', '#009688');
document.body.style.setProperty('--height', '150px');
cssBol = true;
}
}
</script>