CSS
CSS是层叠样式表,用于控制和美化HTML页面及元素的外观和布局,可分离结构和表现。
前几天偶然看到网络上的一篇文章,原生 CSS
竟然支持变量(其实就是自定义属性),我们工作中都是使用预处理器 Sass
或者 Less
实现变量, 现如今, 我们也可以使用原生的 CSS
变量了.
首先, 我们看看 浏览器对变量的支持 can i use
声明变量的时候, 变量名前要加 --
( 就是两个减号 )
body {
--primary-color: #0088f5;
--text-color: rgba(0, 0, 0, 0.54);
--text-indent: 2em;
}
我想小伙伴们都使用过 Sass
或者 Less
等预处理器了吧, 在 Sass
中是表示变量使用的是 $
, Less
中表示变量的是@
, 而 CSS
出现变量比较晚, 好的声明变量的符号已经被占用了, 而官方为了不产生冲突, 只能使用 --
, 定义的变量值只要符合 CSS
规范的都可以
这里要介绍一个新函数 var()
, 该函数用于读取变量
a {
color: var(--text-color);
}
a:hover {
color: var(--primary-color);
}
p {
text-indent: var(--text-indent);
}
当然 var()
也可设置一个默认值, 它需要第二个参数即默认值, 如果变量不存在就会使用这个默认值
a {
color: var(--disable-color, #eee);
/* 这里的 --disable-color 不存在, 将会使用默认值 */
}
同一个 CSS 变量,可以在多个选择器内声明。读取的时候,优先级最高的声明生效。这与 CSS 的"层叠"(cascade)规则是一致的
<html>
<style>
:root {
--color: blue;
}
div {
--color: green;
}
#alert {
--color: red;
}
* {
color: var(--color);
}
</style>
<body>
<p>蓝色</p>
<div>绿色</div>
<div id="alert">红色</div>
</body>
</html>
上面的代码中, 三个选择器都声明了 --color
变量, 不同的元素读取这个变量的时候, 会采用优先级最高的规则, 所以三段文字的颜色是不一样的, 也就是说变量的作用域就是它所在选择器的有效范围
因此,如果我们要定义全局变量就需要把变量定义在全局, 确保所有元素都可以读取到他们
/* :root表示html元素, 除了优先级更高之外, 与html选择器相同 */
:root {
--color: #ccc;
--primary-color: #007aff;
}
// 设置变量
document.body.style.setProperty('--primary-color', '#007aff');
// 读取变量 #007aff
document.body.style.getPropertyValue('--primary-color');
// 删除变量
document.body.style.removeProperty('--primary-color');