less维护效率取决于变量、mixin和嵌套的约束性用法：变量须集中语义化声明于_variables.less，mixin需带默认值、原子化并注释，嵌套限三层内且仅用于bem强语义关系，伪类与@media必须显式用&拼接。
Less 本身不提升维护效率，真正起作用的是变量、mixin 和嵌套的**约束性用法**。放任自流地写 @red、无参数 .clearfix()、四层嵌套，只会让项目更难接手。
变量必须集中声明且语义化命名
分散在多个文件里定义同名变量，比如两个 _theme.less 都写了 @spacing-sm，后 @import 的会静默覆盖前一个，样式“突然变矮”却查不到源头。
- 所有变量只允许出现在
_variables.less中，其他文件一律@import引入 - 禁用
@red-500这类描述色值的命名，改用@primary-color、@text-muted等功能型名称 - 数值类变量统一单位，如
@spacing-xs: 0.25rem，避免混用px和%导致运算崩坏 - 类型混用会失效：若
@z-index-modal: 1000后被改成@z-index-modal: "1000"，@z-index-overlay: @z-index-modal + 1编译直接报错且无明确提示
Mixin 要带默认值、有文档、原子化
没设默认值的 .flex-center(@direction)，调用时漏传参数就编译失败，错误信息只显示 “undefined variable”，根本看不出是哪个 mixin 哪个参数出问题。
Miller CSV TSV JSON 数据处理器
下载
Miller (mlr) 是一个命令行工具，用于查询、整形和重新格式化名称索引数据，如 CSV、TSV、JSON 和 JSON Lines。它将 awk、sed、cut、join 和 sort 的功能整合到一个专为结构化数据处理而构建的单一工具中。
- 每个参数必须设合理默认值，例如
.border-radius(@radius: 4px) { border-radius: @radius; } - 禁止把整块按钮样式塞进一个 mixin；拆成
.flex-center()、.text-truncate()、.transition-color()等原子级单元 - 所有 mixin 必须在定义上方加注释，说明用途、参数含义、是否含副作用（比如
.reset-input()悄悄删了outline，影响可访问性） - 参数超过 3 个时改用命名参数写法：
.button-style(@bg: @primary-color; @color: #fff; @radius: 4px)，调用时可写.button-style(@radius: 6px)，跳过不改的项
嵌套严格限制三层以内，且仅用于强语义关系
嵌套不增加权重，但生成的选择器会。写 .card .header .title 编译后权重是 0-3-0，比单独的 .title 高太多，后续想覆盖就得加 !important 或更高权重选择器，形成恶性循环。
- 只对 BEM 类型的强语义关系嵌套，例如
.btn { &--primary { ... } }，而不是照搬 DOM 结构.page .main .content .item - 伪类必须显式用
&拼接：&:hover正确，:hover错误（会被当自定义标签解析） -
@media内部必须加&，否则规则脱离父级上下文，变成全局生效：@media (max-width: 768px) { & { display: none; } } - 嵌套超过三层时，优先考虑拆成独立 class，或用
.extend()复用样式，而不是硬撑
最常被忽略的一点：Less 编译失败或输出异常，90% 出在空格、符号、上下文这三类低级问题上——&:hover 后面漏空格、减法运算符前后没空格、@media 里忘写 &。这些错误不报语法错，只让样式“不对劲”，排查成本远高于写的时候多敲一个空格。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
