ビュー 2:
インライン スタイルを使用して CSS 変数を記述する (JS で変数を呼び出すことができます)、スタイル タグで CSS 変数を使用する方法
//方式一
<div
:style="`
--delay:${变量1}s;
--color:hsl(${变量2},50%,50%)
`"
>
<div/>
//第二种方式
<template>
<div :style="cssVars">
<p class="text">测试文本</p>
</div>
</template>
<script>
export default {
data() {
return {
color: "red"
};
},
computed: {
cssVars() {
return {
"--color": this.color
};
}
}
};
</script>
<style lang="scss" scoped>
.text {
color: var(--color);
}
</style>
属性を計算する 2 番目の方法を記述することをお勧めします。値が変更された場合、変更にも対応できます。
ビュー 3:
js 内の変数をバインドするには、style タグ内で直接 v-bind を使用します。
<template>
<div class="box">hello linge</div>
</template>
<script setup>
import { ref } from 'vue'
const color = ref('red')
</script>
<style>
.box {
width: 100px;
height: 100px;
color: v-bind(color);
}
</style>
<template>
<div class="box">hello linge</div>
</template>
<script setup>
import { ref } from 'vue'
const isActive = ref(true)
</script>
<style>
.box {
width: 100px;
height: 100px;
background-color: v-bind('isActive?"red": "white"');
}
</style>
グローバル CSS 変数の使用:
公式ドキュメントでは var(--global:xxx)
この方法でグローバルcss変数が利用できる(scopedを利用すればcss変数に自動的にハッシュ値が付与される)と紹介されていますが、cssの書き方のみ紹介しています。
<style scoped vars="{ color }">
h1 {
font-size: var(--global:fontSize);
}
</style>
このように scss で書くとコンパイル時にエラーが発生します。いくつか調べた結果、scss を使用したい場合は、次の方法を使用してください。
<style lang="scss" scoped vars="{ color }">
.home {
color: var(#{"--global:color"});
}
</style>
scss 動的値は #{}
二重引用符を自動的に削除して、 var(--global:color)
コンパイル失敗の問題を解決します。