符号
$ 符号 被 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>
参考：
