Less 中 calc() 不能直接嵌套变量，需用 ~"calc(@{var} * 1.2)" 插值；响应式字体应封装为 mixin 并配合媒体查询兜底，单位须统一且运算提前完成。
calc() 在 Less 中不能直接嵌套变量？
不是不能，而是 Less 编译时会把 calc() 当作普通字符串原样输出，不会解析里面的 @font-size-base 或 @screen-md。如果你写成 font-size: calc(@font-size-base * 1.2);，Less 会报错或生成非法 CSS。
正确做法是用 Less 的字符串插值（~""）包裹，让变量在编译期求值后拼进 calc() 字符串里：
font-size: ~"calc(@{font-size-base} * 1.2)";
注意：@{...} 是插值语法，~"" 表示“不要加引号地输出这个字符串”，二者缺一不可。
响应式字体缩放的典型计算模式
常见需求是：基础字号随视口线性变化，比如从 16px（320px 宽）到 20px（1200px 宽）。这本质是两点确定一条直线，用 calc() 实现需转为 base + (delta / range) * (vw - min) 形式。
Less 中可封装为混合（mixin），避免重复算术：
.fluid-font(@min-vw: 320px, @max-vw: 1200px, @min-font: 16px, @max-font: 20px) {
@rate: (@max-font - @min-font) / (@max-vw - @min-vw);
font-size: ~"calc(@{min-font} + @{rate} * (100vw - @{min-vw}))";
}
使用时：.fluid-font(320px, 1200px, 16px, 20px);
- 必须用
px单位参与除法，否则 Less 无法计算数值 -
100vw是关键，它让结果真正响应视口宽度；用%或em会失效 - 该公式在
@min-vw以下会反向缩小（可能过小），需配合媒体查询兜底
与媒体查询组合使用的必要性
calc() 线性缩放很灵活，但缺乏断点控制——比如你不想让标题在手机上缩到 14px 以下，也不希望超大屏无限放大到 36px。这时候必须叠加媒体查询限制范围。
推荐结构是「calc 主流动态 + 媒体查询边界截断」：
@font-size-base: 16px;
@breakpoint-sm: 576px;
@breakpoint-lg: 992px;
<p>h1 {
// 默认小屏兜底
font-size: @font-size-base * 1.5;</p><p>// 中屏起启用流体缩放
@media (min-width: @breakpoint-sm) {
font-size: ~"calc(@{font-size-base} * 1.5 + (1vw - @{breakpoint-sm} / 100))";
}</p><p>// 大屏上限锁定
@media (min-width: @breakpoint-lg) {
font-size: @font-size-base * 2.25;
}
}</p>
这里 1vw - @{breakpoint-sm} / 100 是简化版斜率（约 0.01），比完整公式更易读且足够用。
单位混用导致的编译失败或运行时无效
Less 对单位敏感，calc() 内部单位不一致是高频错误源。例如：
- 写
~"calc(@{font-size-base} + 2vw)"—— 错！@font-size-base是16px，不能和vw直接相加 - 正确应统一为视口单位：
~"calc(1rem + 0.5vw)"，或先换算：@base-vw: unit(@font-size-base / 375 * 100, vw);（假设设计稿宽 375px） - 所有参与
calc()运算的值，必须是纯数字+单位，不能含变量运算（如@a + @b）后再插值，得提前算好
最稳妥的方式：把复杂计算放在 Less 变量声明里，只把最终数值插进 calc()。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
