less变量仅在编译前生效，必须定义在.less文件中，编译后被替换为具体值；mixin需按需使用以避免冗余；渐进式接入应保留原css并增量引入.less；更新失效多因构建缓存或监听未触发。
Less 变量如何在 CSS 中生效
Less 本身不是浏览器直接运行的语法，less 文件必须编译为纯 .css 后才能被 HTML 加载。所以“将 Less 与 CSS 结合使用”实际是指：用 Less 编写带变量的源码，再生成标准 CSS。浏览器只认最终输出的 CSS，变量只存在于编译前。
常见错误是把 @primary-color: #007bff; 直接写进 .css 文件——这会导致语法错误，因为原生 CSS 不支持 @ 开头的变量声明。
- 变量定义必须放在
.less文件中（如variables.less） - 通过
@import 'variables.less';在其他.less文件中复用 - 编译后变量会被替换成具体值，例如
color: @primary-color;→color: #007bff; - 不要试图在浏览器 DevTools 里修改
@primary-color——它早已不存在于运行时
混合宏（mixin）怎么避免编译后代码冗余
.button-base() 这类 mixin 看似方便，但滥用会导致 CSS 体积膨胀。比如每个调用都展开全部声明，重复生成相同的 display: inline-flex;、border-radius: 4px; 等。
关键判断点：是否真需要参数化？还是只是静态复用？
立即学习“前端免费学习笔记（深入）”；
- 无参 mixin（如
.clearfix()）适合抽离固定规则集，编译后仍保持简洁 - 带参 mixin（如
.size(@w, @h)）适合动态生成，但要警惕嵌套调用导致的组合爆炸 - 优先考虑 CSS 原生特性：现代项目中，
aspect-ratio、gap、:is()已覆盖很多旧 mixin 场景 - 用
.btn-primary { .button-base(); }而不是.button-base() { ... }定义方式，确保仅在需要处展开
如何让现有 CSS 项目渐进式接入 Less
不必重写所有文件。最稳妥路径是“CSS 优先，Less 增量”：
- 保留原有
style.css，新建style.less作为入口 - 在
style.less顶部用@import (css) 'reset.css';导入已有 CSS（(css)表示跳过编译，原样注入） - 后续新组件样式全写在
components/下的.less文件中，并用@import引入 - 构建时用
lessc style.less > style.css或 Webpack 的less-loader，确保输出仍是单个标准 CSS - 注意路径问题：
@import 'variables';默认找variables.less，若导入的是variables.css必须显式写@import (css) 'variables.css';
为什么有时修改了变量，CSS 却没更新
这不是 Less 本身的问题，而是构建流程卡在缓存或监听环节。典型表现是改了 @text-size: 16px;，但浏览器加载的 CSS 里仍是旧值。
- 检查编译命令是否真的执行了——有些脚本只在首次运行，后续靠手动触发
- Webpack 用户确认
less-loader是否启用javascriptEnabled: true（尤其涉及@plugin时） - VS Code 用户注意：安装了 Easy LESS 插件但未启用“Auto Compile”，保存不会自动编译
- PostCSS 或 PurgeCSS 类工具可能误删了“未显式使用的类”，而该类恰好由 mixin 动态生成，需配置
content或safelist - 浏览器强制刷新（Ctrl+Shift+R）并检查 Network 面板中 CSS 文件的响应头
Last-Modified或ETag是否变化
变量和 mixin 的价值不在炫技，而在约束设计系统的一致性。一旦脱离编译流程，它们就什么都不是。
