SCSS 3.4+起/默认作除法，导致font、grid等原生CSS语法报错；需用引号、插值或拆属性规避歧义，且伪类/clip-path中/同样危险。
SCSS 3.4+ 后 / 被当除法，font 和 grid 里直接崩
SCSS 从 3.4 开始默认把 / 当作除法运算符，而不是 CSS 原生分隔符。这意味着像 font: 12px/24px sans-serif 或 grid-template-columns: 1fr/2fr 这类合法 CSS，会被解析成「12px 除以 24px 再除以 sans-serif」——后半截根本不是数字，直接抛 SassError: Invalid CSS after "px/24px": expected expression。
它只在左右都是纯数字（或可转为数字的变量）时才执行除法；否则就报错，不回退到原生语法。
-
font: $size/$lh sans-serif❌ —— 即使$size和$lh都是数字，拼出来仍是非法表达式 -
width: calc(100%/3)✅ ——calc()内部完全不受影响，SCSS 不介入 -
url(./a.svg)、content: "/"、linear-gradient(to right, a, b)✅ —— 这些上下文不触发除法解析
三种安全写法：不关除法，只绕歧义
没必要禁用整个除法功能（那会破坏 $gap: 24px / 2 这类真实计算），只需在高危位置做针对性处理：
- 用引号包裹整个值：
font: "12px/24px sans-serif"—— 字符串不参与运算，原样输出 - 用插值兜底：
font: #{'12px/24px sans-serif'}—— 强制字符串拼接，适合动态组合场景 - 拆成独立属性：
font-size: 12px; line-height: 24px; font-family: sans-serif—— 彻底避开/，语义更清晰，也方便后续改行高或字体
注意：伪类、伪元素、属性选择器里的 /（比如 clip-path: polygon(0% 0%, 50%/0%, 100% 0%)）同样危险，必须处理。
立即学习“前端免费学习笔记（深入）”；
PurifyCSS 误删 var() 和伪类，不是工具错了
PurifyCSS 默认靠文本匹配判断选择器是否被使用，而 var(--color)、:hover、:first-child 这些在 HTML/JS 中没有对应文本，极易被判定为“未使用”而删除。
更隐蔽的是，某些 CSS 压缩工具（尤其旧版 Laravel 自带的）会直接移除含 var() 的整条声明，连 :root 定义都可能丢。
- 给 PurifyCSS 加白名单：
whitelist: [/.+--.+/]或显式写['.btn:hover', ':root'] - 换支持 CSS 变量的压缩器，比如
css-minify（NPM 包），避免用过时 PHP 工具链 - 关键样式别依赖“隐式存在”，比如
.nav > li:first-child a，确保 HTML 中真有对应结构，或加注释标记/* purifycss ignore */
嵌套 + BEM 时 &__text 不生效？HTML 没写对基类
SCSS 编译后生成的是精确匹配的选择器，比如：
.emotion__text { outline: 1px solid blue; }
.emotion__text--happy { color: rebeccapurple; }但如果你的 HTML 只写了 <div class="emotion__text--happy">，没同时带 emotion__text，那第一条规则就完全不生效——CSS 不做前缀匹配，也不继承。
- BEM 要求修饰符（
--happy）必须和对应块或元素（emotion__text）共存于同一 class 属性中 - 检查编译后的 CSS 文件，确认选择器名和 HTML 中的 class 是否一字不差
- 避免过度嵌套导致选择器爆炸，比如
.a .b .c .d易被 PurifyCSS 漏掉匹配
最常被忽略的一点：SCSS 编译错误往往藏在被 import 的 partial 文件里，而报错行号指向主文件——得逐个检查 @import 链上的每个 .scss。
