css变量

css变量

相信大家都用过CSS预处理，比如，less、scss(sass)。不可避免的会用到变量。
在less中是以 @ 定义变量；
在scss中是以 $定义变量；
然后在css中，也有变量，以-- 定义变量(两根连线词)

css变量的定义

1、语法：

--variableName: variableValue;

variableName表示自定义变量名，variableValue表示属性值。

2、规范：

• 以“–”双横杠开头，后面可以是数字[0-9]、字母[a-zA-Z]、下划线_和短横线-这些组合，甚至是中文也行，但不能包含$、[、^、(、%等字符。
• 大小写是敏感的
• 定义只能在声明块{}里面

3、定义：

1.全局变量

:root

:root{
	--color: red;
}

2.局部变量(定义中html标签上)

html{
	--html: red;
}
body{
	--body: blue;
}
div{
	--color1: green;
}
.div{
	--div: 20px;
}
#div{
	--line_height: 20px;
}

在html元素里面的定义，当定义在html、body中的时候也是可以当成全局使用的

4、示例：

body{
  	--1: red; /*数字*/
  	--background-color: blue; /*字母加-*/
  	--font_size: 20px;/*字母加_*/
  	--宽度: 100px;/*中文*/
  	--width: 100px; /*字母*/
}

css变量的使用

1、语法：

cssPropertyName: var(--variableName [, declarationValue]);

var()会返回--variableName的值，declarationValue表示默认值，也就是当--variableName没有定义的时候，取declarationValue的值。

2、使用 var()：

使用上面示例的代码

.div{
	width: var(--宽度)
}
.p1{
	font-size: var(--font_size)
}
.colora{
	color: var(--1)
}
.clac-width{
	width: calc(100% - var(--width));
}
.no-two-params{
	color: var(--nocolor, red)
}

css变量类型

1、当为字符串时

:root{
	--text1: 'world';
  	--text2: 'hello 'var(--text1);
}
.div3:after{
	content: var(--text2)
}

2、当为熟知时

:root{
	--num: 30;
}
.div3{
	font-size: var(--num)px; /*无效*/
	font-size: var(--num) + px; /*无效*/
	font-size: var(--num) + 'px'; /*无效*/
	
	font-size: calc(var(--num) * 1px); /*有效*/
}

3、变量带单位

变量值带有单位，就不能写成字符串。

/* 无效 */
.foo {
  --foo: '20px';
  font-size: var(--foo);
}

/* 有效 */
.foo {
  --foo: 20px;
  font-size: var(--foo);
}

css变量作用域

同一个 CSS 变量，可以在多个选择器内声明。读取的时候，优先级最高的声明生效。这与 CSS 的"层叠"（cascade）规则是一致的。

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

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

css变量兼容性

1、@supports

@supports ( (--size: 0)) {
  /* 支持 */
}
@supports ( not (--size: 0)) {
 /* 不支持 */
}

2、javascript

if(window.CSS && window.CSS.supports && window.CSS.supports('--size', 0)) {
  /* 支持 */
}else{
  /* 不支持 */
}

3、浏览器支持

使用javascript操作css变量

// 设置变量
document.body.style.setProperty('--primary', '#7F583F');
// 读取变量
document.body.style.getPropertyValue('--primary').trim();
// '#7F583F'
// 删除变量
document.body.style.removeProperty('--primary');