Less通过变量、混合（mixin）和模块化组织实现样式复用：用语义化mixins拆分功能，变量统一管理值，组件级文件按命名空间隔离并@import公共层，编译时启用压缩与strictMath，Webpack/Vue/React中配置别名与抽离CSS，避免冗余输出与作用域污染。
Less怎么让重复样式不重复写
靠变量和混合（.mixin）把公共样式抽出来，而不是复制粘贴。比如按钮的圆角、阴影、过渡效果，全塞进一个 .btn-base() 里，不同颜色变体只改参数。
常见错误是把混合写成“万能函数”——传七八个参数，最后调用时根本记不清哪个位置是边框宽度、哪个是禁用态透明度。应该按语义拆：一个管尺寸，一个管状态，一个管主题色。
-
@primary-color定义主色，所有用到它的组件都引用它，改一处全更新 - 混合里避免硬编码值，比如
border: 1px solid #333→ 改成border: @border-width @border-style @border-color - 嵌套层级别超过 3 层，编译后选择器会过长，影响性能且难调试
组件级样式怎么拆又不散架
每个组件对应一个 .less 文件，比如 header.less、card.less，但它们不直接写完整样式，而是 import 公共层：@import "variables";、@import "mixins/border-radius";。
容易踩的坑是路径混乱：有人把所有 @import 写成相对路径，结果一挪文件就报 File not found；也有人全用绝对路径，换项目结构就崩。推荐用 Less 的 paths 配置（Webpack 或 less-loader 中设 paths: ["src/styles"]），然后统一写 @import "mixins/grid"。
立即学习“前端免费学习笔记（深入）”；
- 组件文件里禁止出现全局选择器如
body或h1，只允许.card、.card__title这类带命名空间的 - 用
&符号控制嵌套作用域，比如.card { &__body { padding: 1rem; } }编译为.card__body，不是.card .card__body - 避免在组件文件里重定义变量，比如
@text-color: #222—— 这会覆盖全局变量，其他组件跟着错
为什么用了Less还是CSS体积越来越大
因为没关掉开发期冗余输出。Less 默认编译会保留嵌套结构、注释、空行，还可能把同一份 mixin 多次展开成重复 CSS 块。
关键在编译配置：生产环境必须启用压缩（compress: true），并开启 strictMath: true 防止意外计算泄露未用样式。更关键是用 guard 控制 mixin 展开条件，比如 .btn(@size) when (@size = large) { font-size: 1.25rem; }，避免无用规则进入输出。
- 检查最终 CSS 是否含大量
.header .header__title这类冗余选择器——说明嵌套没用好&，或用了多层@import导致重复引入 - Webpack 项目中，别让
style-loader在开发时把所有 less 全打进 JS bundle，应配MiniCssExtractPlugin单独抽离 - 运行
lessc --lint能发现未使用的变量和 mixin，但不会自动删，得人工确认再清理
Vue/React里怎么让Less真正复用起来
单文件组件里写 <style lang="less"> 看似方便，实则破坏复用：变量和 mixin 写在里面，别的组件用不了；抽到外部又容易漏 @import，热更新时样式不生效。
正确做法是把所有基础层（variables.less、mixins.less、reset.less）放在 src/styles 下，然后在每个 SFC 的 style 标签顶部统一加：
@import "@/styles/variables"; @import "@/styles/mixins";
注意 Vue CLI 和 Vite 对 @ 别名的支持方式不同，Vite 需在 vite.config.ts 中配 resolve.alias，否则 @import 报错。
- 不要在组件 style 里写
:global(.some-class)来穿透作用域——这等于放弃 CSS 模块化，复用性归零 - React 用
craco或react-app-rewired才能改 create-react-app 的 less 配置，否则默认不支持@import别名 - 如果团队用 Tailwind，Less 就该退居二线：只负责主题变量和极少量定制组件，别试图用 Less 实现整套工具类
最难的不是学会 Less 语法，而是判断哪部分该抽成变量、哪部分该封成 mixin、哪部分干脆不该用 Less——比如动画关键帧、字体加载逻辑，原生 CSS @规则更稳。工具只是延长手，不是代替脑子。
