关于CSS变量你知道吗

CSS

发布日期: 2023-03-05

这几年关于css样式的预处理器层出不穷，由于最开始的CSS缺乏对原生变量的支持，所以优秀的开发工作者开始转向像sass(scss)/less等预处理器、它们支持例如变量、函数等一系列便于开发的操作

一、关于 `CSS` 变量

CSS变量可以像其他语言中的任何其他变量一样的去使用，即为 then 分配特定值并在以后引用该值。（该值并未实际存储）
它们也称为自定义属性或级联变量

二、如何定义和使用 `CSS` 变量

在 Javascript 中，通常通过以下方式之一声明和初始化变量：

let tom = 10;
const juerry = 20;
var luck = 30;

但是在 CSS中，使用 let, const, var 这样的关键字是会报错的，那使用什么呢？

可以在用户定义的变量名前面使用 2 个连字符 (破折号 –)，需要注意的是，要把它们放在一个作用域范围内。

用过 Vue 的小伙伴都知道，声明less，css样式块可以加上一个 scope,即表名，这个样式是有作用域的，并非全局文件。在 Javascript 中我们有函数作用域、块作用域、全局作用域这样的作用域，我们在 CSS 中也有作用域。

:root {
  --main-color: red;
}

这里我们使用了:root选择器。它以 DOM 的顶部元素为目标，因此具有全局范围。类似地，我们可以有基于不同 CSS 选择器的其他本地范围。

那么问题来了，这样定义的样式会有争议性、比如我们在全局级别和本地级别分别定义一个相同的 CSS 属性，那么谁才是的number one呢？

<p>css 变量学习</p>
<div>了解 css 属性</div>
<h4>CSS 非常有趣</h4>

:root {
  --main-color: red;
}
p {
  --main-color: blue;
  color: var(--main-color);
}
div {
  color: var(--main-color);
  --main-color: green;
}
h4 {
  color: var(--main-color);
}

通过代码和运行结果我们可以发现：

我们是如何访问 CSS 变量
局部变量比全局变量具有更高的优先级
先使用该属性后声明，CSS 仍会使用它，就像div.

三、使用 `CSS` 变量`var()`

上个案例中我们使用了该var()函数访问上面定义的 CSS 变量，var()函数将属性名称作为参数，从样式表中检索它的值（如果存在）并将其替换为实际的 CSS 属性。

由此可见，与 CSS 中的其他语言变量不同，不存储值，它们只是在使用时将其替换为实际的 CSS 值。

四、实战中使用CSS变量有哪些优势？

首先看一段代码：

:root {
  --main-font-color: #E9E9E9;
  --main-bg-color: rgba(128,128,0,1);
}
p {
  color: var(--main-font-color);
  background-color: var(--main-bg-color);
}
span {
  color: #E9E9E9;
  background-color: rgba(128,128,0,1);
}