CSS Variable 使用 Keyword | 點燈坊

CSS Variable 常搭配 Number 與 calc()，事實上也可搭配 Keyword。

Version

CSS 3

Keyword

javascript 經過 text-transform 轉成大寫。

<template>
  <div class="title">javascript</div>
</template>

<style scoped>
* {
  --casing: uppercase;
}

.title {
  text-transform: var(--casing);
}
</style>

第 6 行

* {
  --casing: uppercase;
}

• --casing：將 uppercase keyword 定義到 --casing

第 10 行

.title {
  text-transform: var(--casing);
}

• text-transform：使用 --casing 所定義的 uppercase

Conclusion

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

Reference

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