css变量

css变量

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

css变量的定义

一、语法：

--variableName: variableValue;
复制代码

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

二、规范：

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

三、定义：

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中的时候也是能够当成全局使用的

四、示例：

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

css变量的使用

一、语法：

cssPropertyName: var(--variableName [, declarationValue]);
复制代码

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

二、使用 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变量类型

一、当为字符串时

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

二、当为熟知时

: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); /*有效*/
}
复制代码

三、变量带单位

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

/* 无效 */
.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变量兼容性

一、@supports

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

二、javascript

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

三、浏览器支持

使用javascript操做css变量

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