CSS Variable 除了搭配 calc() 外，也可搭配其他 CSS function 使用。
Version
CSS 3
clamp()
CSS Rocks 的 font-size 使用 vw，因此會根據 browser 實際寬度而變，但希望有其最小值與最大值。
<template>
<div class="title">CSS Rocks</div>
</template>
<style scoped>
* {
--min: 1rem;
--max: 4rem;
--clamped-font-size: clamp(var(--min), 2.5vw, var(--max));
}
.title {
font-size: var(--clamped-font-size);
}
</style>
第 6 行
* {
--min: 1rem;
--max: 4rem;
--clamped-font-size: clamp(var(--min), 2.5vw, var(--max));
}
--min：定義最小值--max：定義最大值--clamped-font-size：clamp()的最大值與最小值皆來自於 CSS variable
12 行
.title {
font-size: var(--clamped-font-size);
}
font-size：由--clamped-font-size動態決定
Conclusion
- CSS function 皆可使用 CSS variable，可視需求使用之