CSS Variable 除了用來處理重複值外，實務上常常搭配 calc() 使用。
Version
CSS 3
calc()
原本圖片為 640x480，使用 calc() 重新根據 width 計算 height。
<template>
<img class="scenery" src="https://picsum.photos/640/480/?random=10">
</template>
<style scoped>
* {
--image-width: 300px;
--image-height: calc(var(--image-width) * 85%)
}
.scenery {
width: var(--image-width);
height: var(--image-height);
}
</style>
第 6 行
* {
--image-width: 300px;
--image-height: calc(var(--image-width) * 85%)
}
--image-width：在*定義為300px--image-height：使用calc()根據--image-width乘以85%
11 行
.scenery {
width: var(--image-width);
height: var(--image-height);
}
width：根據--image-width所定義height：根據---image-height所定義
Conclusion
- 當使用
calc()時，其值常須重複使用，此時正是使用 CSS variable 好時機