less变量需加模块前缀（如@btn-primary-bg）避免命名冲突，声明须带分号，注意引入顺序；.mixin()适合动态样式，.extend()用于固定样式合并；函数操作hsl空间，慎用嵌套；变量需同步为css自定义属性以联动js。
Less变量怎么写才不踩命名冲突的坑
Less变量不是CSS自定义属性，它在编译期就替换成实际值，所以作用域和命名直接影响最终CSS结构。很多人用@primary-color全局声明后，在组件里又覆盖成@primary-color: #007bff;，结果整个项目按钮、标题、边框全变蓝——因为Less变量是“就近向上查找”，不是CSS那种级联。
- 变量名加模块前缀更安全，比如
@btn-primary-bg、@form-input-border，避免和第三方库（如Ant Design的@primary-color）撞车 - 不要用
@base、@text这种泛义名，编译后无法追溯来源 - 声明变量时别漏掉分号，
@spacing-xs: 4px少个;会导致后续所有变量失效，但Less通常不报错，只默默跳过
常见错误现象：Cannot resolve variable @shadow-sm，其实不是没定义，而是定义在了mixins.less里，而你只引入了variables.less，忘了顺序依赖。
用.extend()还是.mixin()？看复用意图
.mixin()生成的是重复CSS规则，适合带参数的动态样式；.extend()是选择器合并，生成更紧凑的CSS，但有严格限制——只能扩展顶层选择器，不能跨文件、不能带参数、不能在@media里用。
- 要控制颜色/尺寸/圆角等可变维度 → 用
.mixin()，比如.btn(@bg: #007bff, @radius: 4px) - 要复用一组固定样式（如「视觉隐藏」、「清浮动」）→ 用
:extend()，比如.sr-only:extend(.visually-hidden all) - 别在
.mixin()里写&:hover嵌套再调用，容易产生冗余选择器链；改用.mixin()返回属性块，由调用方控制嵌套层级
性能影响：100个.btn()调用会输出100份padding/background等声明；而.btn-base:extend(.btn-reset all)只会输出一次基础样式，再把所有用到它的选择器列在后面。
Less函数（darken()、fade()等）为什么有时颜色不对
Less内置函数操作的是HSL色彩空间，不是RGB。比如darken(#ff6b6b, 20%)不是简单减去20%亮度，而是把HSL里的L值降低20个百分点——这在浅色上效果明显，在深色上可能直接变黑，甚至溢出。
-
lighten()/darken()对饱和度高的颜色（如#ff0055）容易失真，建议搭配saturate()或desaturate()微调 -
fade(@color, 80%)生成的是rgba()，但IE11不支持，如果要兼容，得用fadeout()配合opacity降级 - 函数不能嵌套调用，
darken(lighten(@c, 10%), 5%)会报错，必须拆成两步变量赋值
典型错误：background: darken(@primary, 10%); border: 1px solid darken(@primary, 20%);——看起来合理，但两个darken()各自计算，L值变化不是线性叠加，视觉上边框反而比背景亮。
如何让Less变量和JS运行时样式联动
Less变量编译后就没了，没法直接传给JS。想实现主题切换或用户偏好适配，得靠两层机制：
- 编译时：用
@import (reference)引入变量文件，确保JS层能读取同一份JSON配置（比如把colors.json转成variables.less和theme.js） - 运行时：把关键变量（如
@brand-primary）同步导出为CSS自定义属性，用:root { --brand-primary: ~"@{brand-primary}"; }，再让JS读getComputedStyle(document.documentElement).getPropertyValue('--brand-primary') - 别用
javascript模式（已废弃），也别在Less里拼接@{var}进url()试图动态加载图片——路径必须是静态字符串，否则Webpack或Vite构建会找不到资源
最容易被忽略的一点：Less里@media (min-width: @screen-md)中的@screen-md必须是数字带单位（如768px），不能是纯数字768，否则编译后变成@media (min-width: 768)，浏览器直接忽略整条媒体查询。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
