Less提效核心在于“少改”和“防错”：变量管全局值（语义化命名、集中管理）、mixin管复用逻辑（带参+条件+原子化）、嵌套限三层且仅用于强语义关系，三者协同降低重复与维护成本。
直接说结论：Less 提效不靠“多写”，而靠“少改”和“防错”。变量管全局值，mixin 管复用逻辑，嵌套只在语义明确时用——三者配合才能真正减少重复、降低维护成本。
变量怎么设才不会后期改崩？
变量不是随便起个 @red 就完事。它得承载语义，且有明确作用域。
- 颜色类变量用功能命名，比如
@primary-color、@text-muted，而不是@red-500 - 间距/字体等数值变量统一单位，优先用
rem或em，避免混用px和%导致计算出错 - 所有变量集中放在
_variables.less文件里，其他文件只@import，禁止分散定义 - 慎用选择器插值（
.@{name}），它会让编译后类名不可预测，调试困难
mixin 怎么写才不算白写？
一个没参数、没条件判断的 mixin，基本等于复制粘贴。真正省事的是能“算”、能“判”、能“组合”的。
- 带参数的 mixin 必须设默认值，比如
.border-radius(@radius: 4px) { border-radius: @radius; } - 用
when做条件分支，例如响应式边框：.border(@width) when (@width > 0) { border: @width solid @border-color; } - 避免把整块组件样式塞进一个 mixin；拆成原子级（
.flex-center()、.text-truncate()）更易组合 - 别在 mixin 里硬编码颜色或尺寸，全部走变量引用
嵌套为什么越写越难覆盖？
嵌套本身不增加权重，但嵌套生成的选择器会。.card .header .title 的权重是 0-3-0，比单独的 .title 高太多，后续想覆盖就得加更多类或用 !important。
Miller CSV TSV JSON 数据处理器
下载
Miller (mlr) 是一个命令行工具，用于查询、整形和重新格式化名称索引数据，如 CSV、TSV、JSON 和 JSON Lines。它将 awk、sed、cut、join 和 sort 的功能整合到一个专为结构化数据处理而构建的单一工具中。
立即学习“前端免费学习笔记（深入）”；
- 只对强语义关系嵌套，比如
.btn { &--primary { ... } }，而不是照搬 DOM 结构.page .main .content .item - 状态伪类（
:hover、:disabled）必须用&显式拼接，写成&:hover，不是:hover - 嵌套层级严格 ≤ 3 层；超过就该拆成独立 class 或用
.extend()复用样式 - 媒体查询内嵌套必须加
&，否则编译后丢失父级上下文，例如@media (max-width: 768px) { & { display: none; } }
编译后 CSS 膨胀或报错，先查这三处
Less 编译失败或输出异常，90% 出在空格、符号、上下文这三类低级但致命的问题上。
-
&后面漏空格：写成&:hover正确，&:hover（无空格）会被当自定义标签解析，报Unknown word - 减法运算符前后没空格：
width: 100% - 20px错，width: 100% - 20px（中间有空格）才对 -
@media内部忘了&：导致媒体查询规则脱离父选择器，编译后变成全局生效，破坏样式隔离 - 启用
strictMath: true和strictUnits: true编译选项，能提前暴露多数语法歧义
最常被忽略的是嵌套与 mixin 的协作边界：嵌套负责结构表达，mixin 负责逻辑复用，变量负责值管理——三者各司其职，混用或越界就会让代码从“省事”变成“救火”。
