Vue新特性:在CSS中使用JS变量
myzbx 2024-12-13 15:06 25 浏览
前言
《Vue 3：2020年中状态更新》的时候，文中曾经提到过尤雨溪希望7月中旬发布RC版(候选版本)，8月初发布3.0正式版。
不过现在已经八月初了怎么还是没发布呢？这个月初到底几号才算是"初"呢？于是我赶紧去github上看看现在到底有没有什么风吹草动，看着看着突然发现一个非常好玩的特性，这个特性我以前就经常这么想：要是我在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-gradient
- chinese-layout
从他俩的名字就可以看出，都是用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" href="https://cdn.jsdelivr.net/npm/chinese-layout">
<!-- 在这里用link标签引入中文渐变色 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chinese-gradient">
<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>
运行结果：
也就是说，CSS变量可以这样定义：
body {
--蓝绿色: aquamarine;
}
然后调用的时候：
h1 {
color: var(--蓝绿色);
}
在vue中的变量
那么怎样才能在vue3的**<style>中使用<script>**里声明的变量呢？
首先我们先创建个支持vue3的vite项目：
npm init vite-app vars
然后进入到该文件夹安装依赖：
cd vars
npm i
然后创建一个组件，组件型式长这样：
<template>
<h1>{{ color }}</h1>
</template>
<script>export default {
data () {
return {
color: 'red'
}
}
}</script>
<style vars="{ color }">h1 {
color: var(--color);
}</style>
还记得文章一开始写的幻想中的组件是什么样吗：
<style>h1 {
color: this.color;
}</style>
但是就算vue再牛它也不可能给CSS安个this啊，除非再做一个什么预处理器，不过这次利用CSS变量已经可以很接近咱们幻想中的组件啦：
<style vars="{ color }">h1 {
color: var(--color);
}</style>
首先要在**<style>标签中写个vars="{}"**，再在大括号里写上你在data中声明过的值。
再来试一下这个变量是不是响应式的，动态改变**<script>标签中的this.color**值会不会引起视图的变化呢？来试一下：
<template>
<h1>Vue</h1>
</template>
<script>export default {
data () {
return {
opacity: 0
}
},
mounted () {
setInterval(_ => {
this.opacity >= 1 && (this.opacity = 0)
this.opacity += 0.2
}, 300)
}
}</script>
<style vars="{ opacity }">h1 {
color: rgb(65, 184, 131);
opacity: var(--opacity);
}</style>
运行结果：
可以看到每300毫秒我们就改变一下this.opacity的值，它会映射到CSS变量上去，this.opacity变了，--opacity的值就会随之变化，视图也会随着数据的更新而相应的更新，这个特性简直太棒了！
多个变量之间使用逗号进行分隔：
<template>
<h1>Vue</h1>
</template>
<script>export default {
data () {
return {
border: '1px solid black',
color: 'red'
}
}
}</script>
<style vars="{ border, color }" scoped>h1 {
color: var(--color);
border: var(--border);
}</style>
脑洞大开
既然chinese-gradient和chinese-layout这两个CSS库验证了CSS中文变量的可行性，而且我记得对象的属性也是可以写中文的，那么咱们就来试一下在vue中能不能用这种黑魔法来写中文：
<template>
<h1>Vue</h1>
</template>
<script>export default {
data () {
return {
'透明度': 0
}
},
mounted () {
setInterval(_ => {
this['透明度'] >= 1 && (this['透明度'] = 0)
this['透明度'] += 0.2
}, 300)
}
}</script>
<style vars="{ 透明度 }">h1 {
color: rgb(65, 184, 131);
opacity: var(--透明度);
}</style>
运行结果：
居！然！管！用！了！
以后大家不会命名的话也别用汉语拼音了，直接写中文吧哈哈！后续维护的时候一看变量名就能一目了然(不过还是推荐用英文)。
原理
猜也能猜到，大概率是用到了类似于**dom.style.setProperty('--opacity', this.opacity)**之类的方法，按下f12打开控制台一看，果不其然，它控制的是组件元素的style属性：
不过我们刚才在<style>标签中只用到了var，scoped其实也很常用，那么如果他们两个碰到一起去会编译成什么样呢？
<style vars="{ 透明度 }" scoped>h1 {
color: var(--透明度);
}</style>
运行结果：
可以看到Vue把CSS变量也编译了一个和**data-v-**后面的那串随机字符一样的：
那么问题来了，假如我要是在全局样式里定义了一个**--color属性，我在带有scoped属性的组件里想用这个全局的CSS变量，可是一旦在scoped中使用CSS变量就会被编译成：--62a9ebed-color**，可是全局定义的不是**--62a9ebed-color而是--color**，这样就会出现找不到全局属性的局面，这个问题要怎么解决呢？其实也很简单，只需要在**--的后面加上一个global:**就可以了：
<style vars="{ color }" scoped>h1 {
color: var(--global:color);
}</style>
这样编译出来的CSS就会变成：**var(--color)**啦！
结语
怎么样是不是很好玩？Vue这次更新诚意满满，不过大家都把关注点放在了Composition-API上了，没有注意到这些不起眼的边边角角，但就是这些边边角角却可以极大的提高我们的开发体验。
对了，CSS变量也是有兼容性的:
从[caniuse](<https://www.caniuse.com/#search=CSS Variables>)网站上可以看到，它是不兼容IE的，使用的时候记得确认一下自己项目需要兼容的范围。
相关推荐
- 砌体植筋拉拔试验检验值到底是6.0KN，还是10.2KN，如何计算确定
-
砌体拉结筋植筋养护完成后，需对所植钢筋进行拉拔试验，以检验植筋的锚固强度是否满足设计要求。检测时，按照一定的抽样比例进行拉拔试验。根据《混凝土结构后锚固技术规程》JGJ145-2013，以同品种、同...
- 柴油机功率如何计算?计算柴油机功率需要哪些参数?
-
在汽车领域，对于柴油机功率的计算是一项重要的工作，它有助于我们更好地了解柴油机的性能和适用场景。下面我们就来详细探讨一下柴油机功率的计算方法以及所需的参数。首先，我们要了解计算柴油机功率常用的公式。在...
- 变压器短路阻抗的作用和计算方法（变压器短路阻抗的作用和计算方法是什么）
-
变压器短路阻抗的作用和计算方法短路阻抗是在负载试验中测量的一项数据，它是二次侧短接并流过额定电流时，一次侧施加的电压与额定电压的的百分数。那么测量变压器的短路阻抗有什么意义呢？其实变压器的阻抗电压乃是...
- 9.35m层高高支模支撑架计算书（支模架多高属于高支模）
-
某工厂新扩建的建筑面积为1989.2m^2，建筑物总体分为2层，但局部为4层。建筑物檐高19.4m，建筑物总高23m。建筑物呈长方形设置，长度为48.20m，宽度为23.88m，结构形式为框架结构...
- 吊篮(悬挂装置前梁加长)安全复核计算书
-
吊篮（悬挂装置前梁加长）安全复核计算书一种超常规搭设的高处作业吊篮，因使用要求将吊篮悬挂装置前梁加长设置，本计算书针对这种工况的校核，以作参考。计算依据：1、《高处作业吊篮》GB/T19155-...
- 电功率计算公式精编汇总（电功率计算视频讲解）
-
一、电功率计算公式：1在纯直流电路中：P=UIP=I2RP=U2/R式中：P---电功率（W），U---电压（V），I----电流（A），R---电阻（Ω)。2在单相交流电路中：P=UIcosφ...
- 灌注桩承载力检测方法及步骤（灌注桩承载力不够怎么办）
-
检测灌注桩的承载力是确保基础工程安全可靠的关键环节，检测结果的精细能准确为我们提供可靠的数据，让我们能准确判断桩基础的承载力，方便后续施工安排，同样也能让我们根据数据分辨出有问题桩基，采取可靠有效的措...
- 很哇塞的体积计算方法:向量叉乘 很哇塞的体积计算方法
-
高中数学必看：向量叉乘，体积的神。大家都知道a、b的向量是什么意思，但是a、b的向量又是什么？很多同学都不知道，向量的向量在高中阶段非常有用，虽然它是大学的知识，在高中阶段可以干两件事。·第一件事，表...
- 施工升降机基础(设置在地库顶板回顶)计算书
-
施工升降机基础（设置在地库顶板回顶）计算书计算依据：1、《施工现场设施安全设计计算手册》谢建民编著2、《建筑地基基础设计规范》GB50007-20113、《混凝土结构设计标准》GB/T50010-2...
- 剪力墙水平钢筋根数如何计算?（剪力墙水平钢筋绑扎搭接规范）
-
剪力墙水平钢筋根数的计算需综合考虑墙高、起步距离、间距及构造要求等因素，具体步骤如下及依据：1.基本计算公式水平钢筋根数计算公式为：根数=（墙高-起步距离）/间距（墙高-起步距离）/间距...
- 直流电路常用计算公式（直流电路常用计算公式有哪些）
-
1、电阻导体阻碍电流通过的能力叫做电阻，用字母R表示，单位欧(Ω)。R=ρl/s式中R-导体的电阻，欧(Ω)；ρ-导体的电阻率，欧·米(Ω·m)；l-导体的长度，米(m)；s-导体的截面积，平方米(m...
- 电气主电路图的绘制特点（电气原理图主电路）
-
1、电气主电路图中的电气设备、元件，如电源进线、变压器、隔离开关、断路器、熔断器、避雷器等都垂直绘制，而母线则水平绘制。电气主电路图除特殊情况外，几乎无一例外地画成单线图，并以母线为核心将各个项目(如...
- 中考总复习:物理专题 功和机械能 (功的计算、功率、动能、势能)
-
中考物理专题：功与机械能解析一、力学中的功——能量转化的桥梁功是力对物体能量变化的量度，需满足两要素：作用在物体上的力、物体沿力方向移动距离。例如推箱子时，若箱子未移动，推力不做功；若箱子滑动，推力做...
- 40亿QQ号，不超过1G内存，如何去重?
-
分享一道网上很火的面试题：40亿QQ号，不超过1G的内存，如何去重？这是一个非常经典的海量数据去重问题，并且做了内存限制，最多只能1GB，本文跟大家探讨一下~~一、常规思路我们日常开发中,如果谈到去重...
- 填充墙体拉结筋植筋深度、孔径、拉拔试验承载力计算!
-
今天分享下植筋间距及保护层要求：根据JGJ145-2013混凝土后锚固技术规程要求植筋与混凝土结构边缘不应小于5mm，植筋为两根及以上时水平间距为不应小于5d（d为钢筋直径）。根据混凝土结构后锚固技...
- 一周热门
- 最近发表
- 标签列表
-
- HTML 简介 (30)
- HTML 响应式设计 (31)
- HTML URL 编码 (32)
- HTML Web 服务器 (31)
- HTML 表单属性 (32)
- HTML 音频 (31)
- HTML5 支持 (33)
- HTML API (36)
- HTML 总结 (32)
- HTML 全局属性 (32)
- HTML 事件 (31)
- HTML 画布 (32)
- HTTP 方法 (30)
- 键盘快捷键 (30)
- CSS 语法 (35)
- CSS 轮廓宽度 (31)
- CSS 谷歌字体 (33)
- CSS 链接 (31)
- CSS 定位 (31)
- CSS 图片库 (32)
- CSS 图像精灵 (31)
- SVG 文本 (32)
- 时钟启动 (33)
- HTML 游戏 (34)
- JS Loop For (32)