使用 Vue 改變 Global CSS Variable | 點燈坊

若有數值在 CSS 重複出現，我們可將其抽成 CSS Variable，將來只需維護一處即可，若使用 Global CSS Variable，由於 Vue 2 沒有直接支援，只能使用 Vanilla CSS 方式改變之。

Version

Vue 2.6.11

Background Color

<div> 的背景色為 紅色。

<template>
  <div class="bar"/>
</template>

<style>
.bar {
  height: 30px;
  background-color: #f00;
}
</style>

• background-color: #f000：設定 <div> 的背景為紅色

Global CSS Variable

<div> 背景一樣是紅色，但改用 global CSS variable。

<template>
  <div class="bar"/>
</template>

<style>
:root {
  --bgColor: #f00;
}

.bar {
  height: 30px;
  background-color: var(--bgColor);
}
</style>

• 以 -- 設定 bgColor 在 :root 內
• 並以 var() 使用 --bgColor

使用 :root 時，只能搭配 <style>，因為 :root 為 global，故不能使用 <style scoped>

Change Color

按下 Change Color 後，<div> 背景色從 紅色 變成 綠色。

<template>
  <div>
    <div class="bar"/>
    <button @click="onClick">Change Color</button>
  </div>
</template>

<script>
let onClick = function() {
  document.querySelector(':root').style.setProperty("--bgColor", "#0f0")
}

export default {
  data: () => ({
    bgColor: '#f00'
  }),
  methods: {
    onClick
  }
}
</script>

<style>
:root {
  --bgColor: #f00;
}

.bar {
  height: 30px;
  background-color: var(--bgColor);
}
</style>

第 9 行

let onClick = function() {
  document.querySelector(':root').style.setProperty("--bgColor", "#0f0")
}

Vue 並沒有直接支援 global CSS variable，只能藉由 querySelector() 取得 :root 後，再使用 style.setProperty() 去修改 --bgColor。

Conclusion

• 若有些功能 Vue 沒有直接支援時，別忘了從 Vanilla CSS 找靈感