CSS：变量的声明和读取

一、变量的声明

在变量名前面加个连接号--，这样就成功声明了一个css变量

变量只能用作属性值，不能用作属性名。

:root{
	--color: #fff;
}

二、变量的读取

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

div{
	color:  var(--color);
}

var() 还有个可选参数，表示默认值，即不存在该变量时使用该值

div{
	color:  var(--color, #000);
}

三、变量值的类型

1、当变量值类型为字符串，可与其他字符串进行拼接

body::after{
	--text1 : 'hello '
	--text2 : var(--text1) 'world'
	content:var(--text2) '！' /*hello world !*/
}

2、当变量值是数值，不能与单位直接拼接，要使用calc()函数连接

body {
  --width: 1200;
  width: calc(var(--width) * 1px);
}

四、变量的作用域

变量的作用域就是它所在选择器的范围

当作用域内有多个同名变量，按优先级最高的生效，同样式生效的规则一致

全局的变量通常放在根元素:root里面，这样任何选择器都可以读取