前言
最近在 github 上发现一个 Vue3 非常好玩的特性，这个特性我以前就经常这么想：要是我在 data 里面定义的变量也能在 CSS 里面用那该多好啊！(大家有没有也这么想过)
幻想
以前做项目的时候经常会这么想：
<template>
<h1>{{ color }}</h1>
</template>
<script>
export default {
data () {
return {
color: 'red'
}
}
}
</script>
<style>
h1 {
color: this.color;
}
</style>
当然，想想也知道不可能，JS 和 CSS 隶属不同上下文，CSS 哪来的 this 呢？
那么怎么才能在 CSS 中使用 JS 变量呢？那就只能用 JS 操作 DOM 然后把变量塞进 style 里了，比如用 ref 获取到 DOM 元素，然后 dom.style.color = this.color。
或者在模板里：
<template>
<h1 :style="{ color }">Vue</h1>
</template>
<script>
export default {
data () {
return {
color: 'red'
}
}
}
</script>
不过这种方式还是有缺陷的，比如本来就不推荐把样式写在 style 属性里，还有就是变量复用会很麻烦，比如一组 DOM 元素都想用这个变量，那就不得不给这一组起个类名，然后再在 mounted 里面 document.getElementsByClassName()，获取到 DOM 集合之后还要循环遍历每个元素，为其加上 dom.style.color = this.color，浪费了很多的性能。
其实 CSS 很多缺陷，并不图灵完备，所以才导致了各种预处理器的出现：Sass、Less、Stylus 等……
它们为 CSS 提供了很多特性：循环、条件语句、变量、函数等……
其中有个特性非常有用，那就是变量！于是 CSS 也引入了变量的这个概念，自从有了 CSS 变量，很多事情真的方便了许多，通过 JS 操作 CSS 变量，然后再在需要的地方使用 CSS 变量，这种方法比之前的高效得多。
什么是 CSS 变量
在 JS 里(不止 JS，所有语言都差不多)，变量有如下几个特性：
-
- 声明
- 使用
- 作用域
声明
为了方便理解，咱们通过用 JS 的方式来类比：
var color = 'red';
在 CSS 中等同于：
--color: red;
当然这点跟 JS 不太一样，但是如果你学 PHP 这类语言或者 Sass 的话应该就很好理解了，在 PHP 或 Sass 中，声明变量的时候没有一个关键字，而是在变量名的第一位加上一个美元符号 $，这就代表声明变量了。
PHP:
$color = 'red';
Sass:
$color: color;
但是 $ 符号被 Sass 占用了，@ 符号被 less 占了，所以 CSS 只能想出别的符号了，CSS 的符号就是两个减号 --
使用
光声明一个变量是没有什么太大意义的，只有使用了它，这个变量才算有价值：
JS:
console.log(color)
可以看到 var 只是个声明变量的关键字，color 才是变量名。
PHP:
echo $color;
Scss:
h1 {
color: $color;
}
但是在 PHP 或 Sass 中，声明变量的时候带着$，用的时候也得带着$。
这就令许多开发者感到困惑，所以 CSS 在使用变量的时候用到了一个函数叫 var()：
CSS:
h1 {
color: var(--color);
}
虽然和 PHP、Sass 一样，调用时要带着前缀(因为那就是变量名的一部分)，但是不一样的是需要用一个 var() 来把变量包裹起来。
作用域
这个很好理解，不仅 JS 里有作用域，CSS 里也有作用域，比如：
JS:
var color = 'red';
function h1 () {
console.log(color);
}
function div () {
var color = 'blue';
console.log(color);
}
h1(); // red
div(); // blue
类似于 CSS 里的：
body {
--color: red;
}
h1 {
color: var(--color); /** 这里获取到的是全局声明的变量，值为 red **/
}
div {
--color: blue;
color: var(--color); /** 这里获取到的是局部声明的变量，值为 blue **/
}
也就是说，变量的作用域就是它所在的选择器的有效范围。
中文 CSS 变量
有一次我看到了两个脑洞大开的库，才发现 CSS 变量还可以这么玩：
从他俩的名字就可以看出，都是用 chinese 开头的，那么大概率就是用中文做的 CSS 变量，点进去一看果不其然。
也就是说 CSS 变量的包容性很强，不像以往编程的时候都必须是英文命名，中文这次居然也可以完美运行，不信咱们来试一下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 在这里用 link 标签引入中文布局 -->
<link rel="stylesheet" rel="nofollow" href="/links?url=aHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L25wbS9jaGluZXNlLWxheW91dA==">
<!-- 在这里用 link 标签引入中文渐变色 -->
<link rel="stylesheet" rel="nofollow" href="/links?url=aHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L25wbS9jaGluZXNlLWdyYWRpZW50">
<style>
/* 清除默认样式 */
* { padding: 0; margin: 0 }
ul { list-style: none }
/* 全屏显示 */
html, body, ul { height: 100% }
/* 在父元素上写入九宫格 */
ul {
display: grid;
grid: var(--九宫格);
gap: 5px
}
/* 给子元素上色 */
li {
background: var(--极光绿)
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
运行结果：
从 caniuse 网站上可以看到，它是不兼容 IE 的，使用的时候记得确认一下自己项目需要兼容的范围。
好了，以上就是今天关于 Vue3 新特性在 CSS 中使用 JS 变量全部内容，希望对大家有用，也欢迎大家留言讨论。