若多個 CSS Selector 共用相同的設定，可將其設定抽成 CSS Variable 方便日後維護。
Version
CSS 3
Global CSS Variable
<div> 的紅色由 global CSS variable 定義。
<template>
<div class="bar"/>
</template>
<style>
:root {
--bgColor: #f00;
}
.bar {
height: 30px;
background-color: var(--bgColor);
}
</style>
第 6 行
:root {
--bgColor: #f00;
}
- 在
:root下定義--bgColor
10 行
.bar {
height: 30px;
background-color: var(--bgColor);
}
- 以
var()使用--bgColor
Global CSS variable 顧名思義所有 CSS selector 都可使用，不限於目前 selector
Local CSS Variable
box1 下的 item1 與 sub1 都能套用 local CSS variable 而變色，但 box2 則無法使用。
<template>
<div class="box1">
<div class="item1">
box1 item1
<div class="sub1">
box1 sub1
</div>
</div>
</div>
<div class="box2">
box2
</div>
</template>
<style scoped>
.box1 {
--my-color1: #f00;
--my-color2: #0f0;
}
.box1 .item1 {
color: var(--my-color1)
}
.box1 .sub1 {
color: var(--my-color2)
}
.box2 {
color: var(--my-color1)
}
</style>
16 行
.box1 {
--my-color1: #f00;
--my-color2: #0f0;
}
將 --my-color1 與 --my-color2 定義在 .box1 下。
21 行
.box1 .item1 {
color: var(--my-color1)
}
.box1 .sub1 {
color: var(--my-color2)
}
item1 與 sub1 都在 .box1 下，因此都可套用 --my-color1 與 --my-color2。
29 行
.box2 {
color: var(--my-color1)
}
.box2 則無法使用 .box1 下的 --my-color1 與 --my-color2。
Conclusion
- 當使用 global CSS variable 時，在 Vue 只能使用
<style>，不能使用<style scoped> - 若想建立 local CSS variable 不影響其他 selector，可使用 CSS class 建立 scope，將 CSS variable 包在該 class 內