scss运算符两侧必须加空格，否则解析失败：如100px-20px会被视为标识符而非减法；/需括号触发除法；%求余须空格防混淆；calc()中空格是css要求，scss需确保输出合规。
SCSS减法运算符 - 前后不加空格会编译失败
这是最常踩的坑：当你写 $width: 100px-20px;，Sass 编译器会直接报错或静默忽略，而不是计算出 80px。原因在于 Sass 解析器把 100px-20px 当作一个整体标识符（类似变量名），而非数学表达式。
- 正确写法必须是
$width: 100px - 20px;（-两侧各一个空格） - 加法
+虽然有时能“侥幸”通过（如10px+5px），但一旦其中一端是变量（如$a + 5px），不加空格就极可能解析失败 - 这个规则对所有二元运算符都适用，不只是
-；只是-最容易被误当成负号或连接符
/ 在 SCSS 中不是除法符号，而是 CSS 字体语法的一部分
直接写 font: 14px/1.5 Arial; 是合法 CSS，但如果你写 $height: 100px / 2;，Sass 默认不把它当除法——因为 / 在属性值中优先被识别为分隔符。
- 必须用括号包裹才能触发运算：
$height: (100px / 2); - 如果右边是变量，比如
$base: 2; $height: 100px / $base;，这时/会被识别为除法，括号可省略 - 但为了一致性和可读性，建议统一加括号，避免在嵌套逻辑中意外失效
乘法 * 和求余 % 对单位和空格都有硬性限制
* 不允许两个带单位的数相乘（如 10px * 10px 编译报错），% 则极易和百分比单位 % 混淆——它们字形相同，全靠空格区分。
-
10px * 2✅ 合法（单位 × 无单位数） -
10px * 2px❌ 报错（单位 × 单位不支持） -
100 % 3✅ 求余运算（注意%两侧必须有空格） -
100% 3❌ 被解析为100%+ 独立的3，不是运算 - 所有运算符（
+, -, *, /, %）两侧加空格是最低成本的防错习惯
calc() 里的空格问题其实是 CSS 层面的，和 SCSS 编译无关
很多人混淆了两层：SCSS 编译阶段的运算，和最终生成的 CSS 中 calc() 的运行时解析。前者是 Sass 解释器的事，后者是浏览器做的事。
- 你在 SCSS 里写
width: calc(100% - 20px);，只要这行本身没用到 Sass 运算，空格只影响 CSS 输出，不影响编译 - 但如果你写成
width: calc(100% - #{$gap});，那-前后仍需空格，否则插值后生成的 CSS 是无效的（如calc(100%-20px)浏览器不认） - 所以真正关键的不是“SCSS 要求空格”，而是“最终 CSS 的
calc()要求空格”，而 SCSS 作为生成器，必须保证输出合规
空格不是风格偏好，是 Sass 解析器的语法分词边界。少一个空格，就可能让 100px-20px 变成不可识别的 token，或者让 100%3 被当成无效值丢弃——这种错误往往不报错，只默默失效，排查起来最耗时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
