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');
相关推荐
©️2020 CSDN 皮肤主题: 书香水墨 设计师:CSDN官方博客 返回首页