符號(hào)
$ 符號(hào) 被 Sass 占用
@ 符號(hào) 被 less 占用
因此CSS中采用了 --
格式
JS:
console.log(color)
可以看到var只是個(gè)聲明變量的關(guān)鍵字摔寨，color才是變量名。
PHP:
echo $color;
Scss:
h1 {
color: $color;
}
CSS在使用變量的時(shí)候用到了一個(gè)函數(shù)叫var()：
CSS:
h1 {
color: var(--color);
}
使用
創(chuàng)建個(gè)支持vue3的vite項(xiàng)目
npm init vite-app 項(xiàng)目名稱
進(jìn)入到該文件夾
cd 項(xiàng)目名稱
安裝依賴
npm i
創(chuàng)建一個(gè)組件
<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>
參考：
