CSS 变量教程

CSS 变量（CSS variable）又叫做"CSS 自定义属性"（CSS custom properties），可以通过JS动态改变。

一、变量的声明

变量名前面要加两根连词线–，变量名大小写敏感。

:root {
  --main-color: #4d4e53;
  --main-bg: rgb(255, 255, 255);
  --logo-border-color: rebeccapurple;
  --header-height: 68px;
  --content-padding: 10px 20px;
  --base-color: var(----main-color); 
}

以上*–main-color*，–main-bg，–logo-border-color就是设置在根标签html 下的css 变量

二、var() 函数

var()函数用于读取变量。

.box {
  color: var(--main-color);
  height: var(--header-height);
}

var()函数还可以使用第二个参数，表示变量的默认值。如果该变量不存在，就会使用这个默认值。

.box {
  color: var(--main-color, #000);
  height: var(--header-height, 80px);
}

三、变量值的类型

如果变量值是一个字符串，可以与其他字符串拼接。
如果变量是数值，必须使用calc()函数，将它们连接(添加单位)。

.foo {
  --gap: 20;
  margin-top: calc(var(--gap) * 1px);
}

四、作用域

<style>
  :root { --color: blue; }
  div { --color: green; }
  #alert { --color: red; }
  * { color: var(--color); }
</style>

<p>蓝色</p>
<div>绿色</div>
<div id="alert">红色</div>

三个选择器都声明了–color变量。不同元素读取这个变量的时候，会采用优先级最高的规则，因此三段文字的颜色是不一样的。

五、响应式布局

响应式布局的media命令里面声明变量，使得不同的屏幕宽度有不同的变量值。

:root {
  --main-color: #4d4e53;
  --main-bg: rgb(255, 255, 255);
}
body {
}
@media screen and (min-width: 768px) {
	:root {
	  --main-color: #ffffff;
	  --main-bg: rgb(255, 134, 255);
	}
	body {
	}
}

六、兼容性处理

使用@support命令进行检测。

a {
  color: #7F583F;
  color: var(--primary);
}

@supports ( (--a: 0)) {
  /* supported */
}

@supports ( not (--a: 0)) {
  /* not supported */
}

七、JavaScript 操作

// 设置变量
document.body.style.setProperty('--primary', '#7F583F');

// 读取变量
document.body.style.getPropertyValue('--primary').trim();
// '#7F583F'

// 删除变量
document.body.style.removeProperty('--primary');

阮一峰的网路日志-CSS 变量教程