SCSS中除法运算符/需加括号或使用math.div()避免被误解析为CSS分隔符，如(14px/2)或math.div(14px,2)；乘法*和求余%也须注意空格与单位限制。
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'};✅ 原样输出，不参与运算
什么时候必须加括号，什么时候可以不加
括号不是可选项，是语法分词的保险绳。Sass 解析器靠空格和括号切分 token，没括号时，/ 在属性值里优先匹配 CSS 分隔规则；有括号才明确告诉 Sass：“这是我要算的”。
- 右边是变量且可转数字：
$height: 100px / $base;可不加括号（但建议加） - 左边是变量、右边是字面量：
$width: $container / 3;必须加括号，否则可能被当 CSS 分隔 - 涉及单位混合：
math.div(100vh, 2)更安全，math.div()是 Sass 官方推荐替代写法（Sass ≥1.3） -
calc(100% / 3)里面不用括号——因为calc()是 CSS 函数，Sass 不介入其内部解析
乘法*和求余%为什么也得小心空格
* 和 % 看似没歧义，实则单位限制和空格要求比 / 更硬。少一个空格，结果就不是你想要的。
立即学习“前端免费学习笔记（深入）”；
-
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) - 别写
calc($gap - 1px)——Sass 会尝试编译这个表达式，但$gap若含单位，很可能报错
真正容易被忽略的是：括号和空格不是风格问题，是 Sass 解析器识别表达式的唯一边界。漏掉一个空格，100%3 就不是求余，而是无效值；少一对括号，100px/2 就不是除法，而是编译错误。
