Vue3中CSS使用JS变量

符号

$ 符号 被 Sass 占用

@ 符号 被 less 占用

因此CSS中采用了 --

格式

JS:

console.log(color)

可以看到var只是个声明变量的关键字，color才是变量名。

PHP:

echo $color;

Scss:

h1 {
    color: $color;
}

CSS在使用变量的时候用到了一个函数叫var()：

CSS:

h1 {
    color: var(--color);
}

使用

创建个支持vue3的vite项目

npm init vite-app 项目名称

进入到该文件夹

cd 项目名称

安装依赖

npm i

创建一个组件

<template>
<div>
  <h1>Hello Vue 3.0 + Vite</h1>
</div>
</template>

<script>
export default {
  data() {
    return {
      color: "red",
      backg: "green"
    }
  }
}
</script>

<style vars="{ color, backg }">
h1{
  color: var(--color);
  background-color: var(--backg);
  text-align: center;
}
</style>

中文CSS变量

使用中文引入变量

<template>
<div>
  <h1>Hello Vue 3.0 + Vite</h1>
</div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      '字体颜色': "red",
      '背景颜色': "green"
    }
  }
}
</script>

<style vars="{ 字体颜色, 背景颜色 }">
h1{
  color: var(--字体颜色);
  background-color: var(--背景颜色);
  text-align: center;
}
</style>

参考：

Vue 超好玩的新特性：在 CSS 中使用 JS 变量