less变量必须以@开头，如@primary-color；所有基础值须抽为变量并统一用kebab-case命名；色值用darken()等函数动态生成，禁用硬编码；嵌套限3层内，mixin不替代语义类名。
Less变量定义必须用@前缀，漏写就编译失败
Less里所有变量都得以@开头，比如@primary-color。不加这个符号，Less会当普通CSS属性处理，直接报错ParseError: Unrecognised input。常见于从CSS复制代码后忘记改前缀，或者初学时误以为和Sass的$一样可省略。
实操建议：
- 变量名统一用kebab-case（如
@font-size-base），避免下划线或驼峰，减少和CSS自定义属性混淆 - 所有颜色、间距、圆角等基础值必须抽成变量，禁止在
.btn { padding: 8px 16px; }里硬写数字 - 变量定义文件建议单独建
variables.less，并在入口文件最顶部@import 'variables.less';
用darken()和lighten()替代手算十六进制色值
语义化不是只换名字，更要让颜色关系可维护。比如按钮悬停色不该写死#2a5b8c，而应基于@primary-color动态生成——否则主色一改，所有衍生色全得手动同步。
实操建议：
- 按钮hover用
darken(@primary-color, 10%)，禁用#xxx硬编码 - 禁用
rgba(@primary-color, 0.1)这种写法：Less不支持对变量直接套rgba，得用fade(@primary-color, 10%) - 色值函数要配合
contrast()做可访问性校验，比如color: contrast(@primary-color, white, black);
嵌套规则别滥用，&符号只解决父子关系
Less嵌套看着方便，但过度使用会让选择器层级过深，生成的CSS选择器权重爆炸，后期覆盖极难。比如.card { .header { .title { ... } } }编译出来是.card .header .title，实际项目中往往只需要.card-title就够了。
实操建议：
- 只在真正存在DOM嵌套且需样式隔离时才嵌套，例如组件内部结构
.modal { &__header { ... } &__body { ... } } - 用
&拼接BEM类名时，确保父选择器本身已带语义，比如.button { &--primary { ... } }比.btn { &-primary { ... } }更清晰 - 嵌套层级严格限制在3层内，超过就拆成独立规则或用
extend()
编译后CSS类名必须保留语义，别让mixins变成黑盒
很多人用.flex-center()这种mixin图省事，结果所有居中元素最终都变成display: flex; justify-content: center; align-items: center;，但HTML里可能叫header-logo、loading-spinner、empty-state——样式行为和语义完全脱钩。
实操建议：
- mixin只封装重复逻辑，不替代语义类名。正确写法是
.logo { .flex-center(); }，而不是.flex-center { ... } - 带参数的mixin要标注用途，比如
.text-truncate(@lines: 2)比.truncate()更能表达意图 - 避免
.clearfix这类纯技术类名，改用.wrap-content或.overflow-hidden等带业务含义的命名
变量和函数本身不产生语义，真正的语义来自你给类名起的名字、以及它和HTML结构的对应关系。写@spacing-md: 16px;只是第一步，下一步得想清楚.form-item为什么需要这个间距，而不是把所有16px都塞进同一个变量里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
