Vue3新特性如何在CSS中使⽤JS变量
Vue3 新特性如何在CSS中使⽤JS变量
前⾔
最近在 github 上发现⼀个Vue3⾮常好玩的特性，这个特性我以前就经常这么想：要是我在 data ⾥⾯定义的变量也能在 CSS ⾥⾯⽤那该多好啊！(⼤家有没有也这么想过)
幻想
以前做项⽬的时候经常会这么想：
<template>
<h1>{{ color }}</h1>
</template>
<script>
export default{
data(){
return{
color:'red'
}
}
}
</script>
<style>
h1{
color: lor;
}
</style>
当然，想想也知道不可能，JS 和 CSS ⾪属不同上下⽂，CSS 哪来的 this 呢？
那么怎么才能在 CSS 中使⽤ JS 变量呢？那就只能⽤ JS 操作 DOM 然后把变量塞进 style ⾥了，⽐如⽤ ref 获取到 DOM 元素，然后lor = lor。
或者在模板⾥：
<template>
<h1 :>Vue</h1>
</template>
<script>
export default{
data(){
return{
color:'red'
}
}
}
</script>
不过这种⽅式还是有缺陷的，⽐如本来就不推荐把样式写在 style 属性⾥，还有就是变量复⽤会很⿇烦，⽐如⼀组 DOM 元素都想⽤这个变量，那就不得不给这⼀组起个类名，然后再在 mounted ⾥⾯ ElementsByClassName()，获取到 DOM 集合之后还要循环遍历每个元素，为其加上 lor = lor，浪费了很多的性能。
其实 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"href="cdn.jsdelivr/npm/chinese-layout"> <!-- 在这⾥⽤link标签引⼊中⽂渐变⾊ -->
<link rel="stylesheet"href="cdn.jsdelivr/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变量
也就是说，CSS 变量可以这样定义：
body {
--蓝绿⾊: aquamarine;
}
然后调⽤的时候：
h1 {
color: var(--蓝绿⾊);
}
在 vue 中的变量 那么怎样才能在 vue3 的
⾸先我们先创建个⽀持 vue3 的 vite 项⽬：
npm init vite-app vars
然后进⼊到该⽂件夹安装依赖：
cd vars
npm i
然后创建⼀个组件，组件型式长这样：
<template>
<h1>{{ color }}</h1>
</template>
<script>
export default{
data(){
return{
color:'red'
}
}
}
href标签怎么用</script>
<style vars="{ color }">
h1{
color:var(--color);
}
</style>
还记得⽂章⼀开始写的幻想中的组件是什么样吗：
<style>
h1{
color: lor;
}
</style>
但是就算 vue 再⽜它也不可能给 CSS 安个 this 啊，除⾮再做⼀个什么预处理器，不过这次利⽤ CSS 变量已经可以很接近咱们幻想中的组件啦：
<style vars="{ color }">
h1{
color:var(--color);
}
</style>
⾸先要在
再来试⼀下这个变量是不是响应式的，动态改变

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。