less 对 calc() 会错误解析为数值运算导致结果失效，如 calc(100% - 4rem) 变成 calc(96%)；sass 则原样输出更安全；less 必须用 ~"100% - 4rem" 显式禁用解析，否则易出错且调试困难。
Less 并不比 Sass 更直观——它只是默认行为不同，容易让人误以为“更直观”，实际是更容易踩坑。
calc 在 Less 中会被自动解析并错误计算
Less 编译器会把 calc(100% - 4rem) 当作数学表达式处理：它识别 100% 和 4rem 都含单位，但内部运算逻辑不支持跨单位减法，于是直接丢弃 rem，按比例折算成 calc(96%) 这类无效结果。
- 现象：
width: calc(100% - 4rem);编译后变成width: calc(96%); - 原因：Less 的
+/-运算默认尝试数值归一化，%被当作 100 单位，4rem被忽略或转为 0 - 这不是“直观”，是隐式降级——你没写错，但它擅自改了语义
Sass 的 calc 默认不参与运算，反而更安全
Sass（尤其是 SCSS）对 calc() 内容基本不做解析，原样输出。只要你在 calc() 里写的语法合法，Sass 就忠实地保留它。
- 示例：
width: calc(100% - 4rem);编译后仍是width: calc(100% - 4rem); - 前提：不能用 Sass 变量直接拼接，比如
$gap: 4rem; width: calc(100% - #{$gap});是 OK 的；但calc(100% - $gap)会触发单位运算，可能出错 - 关键区别：Sass 不主动“优化”
calc，Less 却会“好心办坏事”
Less 中正确写法必须显式禁用解析
要用 calc，就得告诉 Less：“别碰这里面的东西”。两种主流写法：
-
width: calc(~"100% - 4rem");—— 使用波浪号~表示“纯字符串”，最常用也最推荐 -
width: "calc(100% - 4rem)";—— 整个值当字符串，但会导致最终 CSS 值带引号，浏览器不识别，**不可用** - 注意：
~后面必须是双引号包裹的字符串，单引号无效；且不能有空格如~"100% - 4rem "
真正影响体验的是编译时机与调试成本
Less 在客户端（如浏览器内通过 less.js）运行时，calc 错误往往延迟暴露：样式看起来不对，但开发者工具里看到的是已编译的错误 CSS，很难回溯到原始 .less 行。
- Sass 通常在构建时编译，错误会直接报在终端，定位明确
- Less 的
~"..."写法虽短，但属于“特例特办”，每个 calc 都得加，容易漏 - 团队协作中，新人看到
calc(~"100% - @gap")容易困惑：为什么这里要加波浪号，别的地方不用？
calc 不是 Less 的强项，它的“直观感”来自语法宽松，代价是行为不可控。真正在意计算可靠性，就该把复杂计算交给 JS 或 CSS 自定义属性，而不是依赖预处理器的运算机制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
