scss中除法运算符/易被误解析为css分隔符，需用括号或math.div()避免报错；乘法*和求余%对空格与单位敏感；calc()内运算符两侧必须有空格，否则生成非法css。
SCSS除法运算符/被当成CSS分隔符怎么办
直接写 font: 14px/1.5 Arial; 会报错，不是 CSS 写错了，是 Sass 把 / 当成除法在解析。Sass 3.4+ 默认把 / 视为运算符，只要左右不是纯数字或可转数字的变量，就直接崩——哪怕你本意就是写原生 CSS 的行高分隔。
必须用括号包裹才能强制触发除法计算，否则它不会“自动降级”回 CSS 语义：
-
$gap: (24px / 2);✅ 编译为12px -
$lh: (1.5 / 1);✅ 编译为1.5 -
font: 14px/1.5 Arial;❌ 报错：Invalid CSS after "px/1.5": expected expression -
font: #{'14px/1.5 Arial'};✅ 原样输出，不参与运算
为什么math.div()比括号更可靠
math.div() 是 Sass ≥1.3 官方推荐的替代方案，尤其在 Dart Sass 4.0+ 中，/ 已被严格限制：仅允许出现在 font、grid、background 等少数属性值中，其他位置一律报错。
常见错误现象：
-
$size: 100px / 4;→ 编译失败，提示Invalid CSS after "100px" -
width: $container-width / 2;→ 同样报错，哪怕变量已定义 -
(100px / 4)无效，括号不改变运算符解析规则
正确用法：
@use 'sass:math';
$base: 16px;
$half: math.div($base, 2); // ✅ 得到 8px
.container { font-size: $half; }
注意：math.div() 要求两个参数都为数值类型，单位自动保留；不支持混合单位，如 math.div(100px, 1rem) 会报错。
乘法*和求余%为什么也得小心空格
* 和 % 看似没歧义，实则单位限制和空格要求比 / 更硬。少一个空格，结果就不是你想要的：
-
10px * 2✅ 合法（带单位 × 无单位数） -
10px * 2px❌ 报错（Sass 不支持单位 × 单位） -
100 % 3✅ 求余（注意%两侧必须有空格） -
100% 3❌ 被解析为100%+ 独立的3，不是运算，最终 CSS 无效 -
width: #{$w} * 2;❌ 插值后变成width: 200px * 2;，浏览器不认——这里该用calc(#{$w} * 2)
calc()里插值时的空格陷阱
很多人以为 calc() 是浏览器的事，SCSS 就不用管空格。错。SCSS 负责生成合法 CSS，而 calc(100%-20px) 是非法的——浏览器要求 calc() 内部运算符两侧必须有空格。
-
width: calc(100% - #{$gap});✅ 输出calc(100% - 20px) -
width: calc(100%-#{$gap});❌ 输出calc(100%-20px)，浏览器忽略整条声明 -
margin: calc(#{math.div($gap, 2)} - 1px);✅ 先由 Sass 算出10px，再拼进calc(10px - 1px) -
margin: calc($gap - 1px);❌ Sass 会尝试编译这个表达式，但$gap若含单位，很可能报错
真正容易被忽略的是：Sass 运算只发生在编译期，所有结果都是静态值；而涉及 viewport 变化、CSS 变量或用户缩放的场景，必须依赖 calc() 或 clamp() 在运行时计算——这点没法绕开。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
