Less和Sass虽都支持BEM，但&行为（Less仅绑定直接父级、Sass可灵活引用）、变量作用域（Less全局覆盖、Sass块级优先）及嵌套编译逻辑不同，照搬易致选择器错误或覆盖失效。
Less 和 Sass 都能写 BEM，但 & 的行为细节、变量作用域和嵌套编译逻辑不同，直接照搬写法容易产出错误选择器或覆盖失效。
Less 中 & 在 BEM 嵌套里的实际表现
Less 的 & 总是拼接为「父选择器 + 当前选择器」，顺序固定，不能反转。它只引用直接父级，不跨层回溯。
- 写
.form { &__item { ... } }→ 输出.form__item，没问题 - 写
.form { .header { &__title { ... } } }→ 输出.header__title（不是.form__title），&绑定的是.header，不是.form - 修饰符写法
&--required必须紧跟在块名后，不能中间插空格或换行，否则编译失败 - 多个修饰符叠加（如
&--large&--disabled）在 Less 中不合法，会报错；得拆成独立规则或用 mixin 拼接
Sass 中 & 对 BEM 的控制更灵活
Sass 的 & 支持位置变换和多重引用，尤其适合复杂 BEM 场景，但新手容易误用导致选择器爆炸。
Miller CSV TSV JSON 数据处理器
下载
Miller (mlr) 是一个命令行工具，用于查询、整形和重新格式化名称索引数据，如 CSV、TSV、JSON 和 JSON Lines。它将 awk、sed、cut、join 和 sort 的功能整合到一个专为结构化数据处理而构建的单一工具中。
-
.form { &__item { &--required { ... } } }→ 输出.form__item--required，层级清晰 - 想反转顺序？写
.btn { .primary & { ... } }→ 输出.primary.btn，Less 不支持这种写法 - 修饰符可组合：
&--large.&--disabled生成.btn--large.btn--disabled，语义明确 - 注意：Sass 的
&在嵌套中若遇到多层选择器（如.a .b { &__c { ... } }），&默认绑定最外层.a，不是.b—— 这和 Less 行为一致，但文档常误导人以为它“就近绑定”
变量与命名空间对 BEM 可维护性的影响
BEM 类名长，靠变量缩写类名前缀时，Less 和 Sass 的变量作用域机制会导致行为差异。
立即学习“前端免费学习笔记（深入）”；
- Less 用
@namespace: "ui"，然后写.@{namespace}-button→ 输出.ui-button，必须用插值@{}，且插值不能出现在选择器开头（如@{namespace}-button合法，@{namespace}button报错） - Sass 用
$ns: "ui"，写.#{$ns}-button→ 同样输出.ui-button，但插值更自由，支持函数处理：.#{$ns}-button--#{$size} - Less 的变量是全局覆盖式：后面定义的
@namespace会直接覆盖前面的；Sass 是块级作用域优先，$namespace在@mixin内重定义不会污染外部 - 这意味着在大型 BEM 项目里，Less 的
@namespace若分散在多个@import文件中，顺序错就全乱；Sass 的@use+ 命名空间导入更可控
容易被忽略的构建与调试陷阱
开发时看不到编译错误，上线后样式错位，往往卡在这几个点上。
- Less 的
@import是顺序敏感的：BEM 工具类（如bem-mixins.less）必须在变量定义之后、组件样式之前引入；Sass 推荐用@use "bem" as *，避免隐式依赖 - 浏览器开发者工具里看到的 CSS 行号，Less 默认指向 .less 文件，但某些构建工具（如 less-loader 7+）需配
sourceMap: true才准；Sass 的sourceMap默认开启且更稳定 - 修改一个 BEM 修饰符（如
--hover）后，Less 编译可能缓存旧结果，需清node_modules/.cache或关掉 watch 模式重启；Sass 的 Dart Sass 缓存机制更智能，但@use路径写错时静默失败，不报错 - 所有 BEM 类名最终要进 HTML，但预处理器不校验 class 存在性 —— 写了
.card__body--highlighted却没在模板里加class="card__body--highlighted"，只能靠人工或工具链补充 lint 规则
