CSS Variable 使用 Number | 點燈坊

CSS Variable 若搭配無單位 Number，可使用 calc() 計算使其變成有單位。

Version

CSS 3

calc()

原本圖片為 640x480，使用 calc() 計算 width。

<template>
  <img class="scenery" src="https://picsum.photos/640/480/?random=10">
</template>

<style scoped>
* {
  --image-width: 320;
  --image-height: 240px;
}

.scenery {
  width: calc(var(--image-width) * 1px);
  height: var(--image-height);
}
</style>

第 6 行

* {
  --image-width: 320;
  --image-height: 240px;
}

• --image-width 只定義 320 Number，卻沒有定義單位

11 行

.scenery {
  width: calc(var(--image-width) * 1px);
  height: var(--image-height);
}

• 若要加上單位 px，可使用 calc() 乘以 1px 獲得

Conclusion

• 其他單位也可舉一反三使用 calc() 計算

Reference

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