css vue 用js变量_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

创建一个组件

Hello Vue 3.0 + Vite

export default {

data() {

return {

color: "red",

backg: "green"

}

}

}

h1{

color: var(--color);

background-color: var(--backg);

text-align: center;

}

中文CSS变量

使用中文引入变量

Hello Vue 3.0 + Vite

export default {

name: 'HelloWorld',

data() {

return {

'字体颜色': "red",

'背景颜色': "green"

}

}

}

h1{

color: var(--字体颜色);

background-color: var(--背景颜色);

text-align: center;

}

参考：