CSS Variable 使用 Color | 點燈坊

CSS Variable 除了能用在 Numeric 外，也可使用於 Color。

Version

CSS 3

Color

使用 color 設定 CSS 為 紅色。

<template>
  <div class="box">CSS</div>
</template>

<style scoped>
* {
  --color-text: #f00;
}

.box {
  color: var(--color-text);
}
</style>

第 6 行

* {
  --color-text: #f00;
}

• --color-text：將顏色定義到 --color-text

10 行

.box {
  color: var(--color-text);
}

• color：使用 --color-text 所定義顏色

Conclusion

• 除了 Number 外，color 也能用於 CSS variable

Reference

Coder’s Block, What Can You Put in a CSS Variable ?