@import无法按需加载，导致样式重复和体积膨胀；而@use强制命名空间隔离、支持精确导出与单次导入，是模块化作用域模型的根本切换。
@import 无法按需加载，导致样式重复和构建体积膨胀
Less 的 @import 是简单文本拼接，不区分作用域、不支持条件导入、不校验路径合法性。它在编译时把整个文件内容原样插入，哪怕只用了一个变量，也会把被导入文件里所有 mixin、嵌套规则、甚至未使用的媒体查询全塞进来。
- 实际项目中常见现象：
@import "mixins.less";后，.btn类里没调用任何 mixin，但最终 CSS 里仍出现.clearfix、.sr-only等无关样式 - 路径错误（比如
@import "./vars"缺少.less后缀）不会报错，而是静默忽略，变量突然失效却无提示 - 无法控制导入顺序：A.less 里
@import "b.less"，B.less 里又@import "a.less"，Less 默认不报循环依赖，编译卡死或产出不可预测结果
Sass 的 @use 和 @forward 是模块化设计，强制命名空间隔离
-
@use "variables" as var;后必须写var.$primary才能访问，杜绝全局污染 -
@use只引入声明，不执行代码；只有真正调用@include或引用变量时，对应逻辑才参与编译 -
@forward "mixins" show .button-style;可精确导出子集，避免暴露内部实现
@import 在 Sass 中已被标记为 legacy，且行为与 Less 不同
立即学习“前端免费学习笔记（深入）”；
Sass 保留 @import 仅作兼容，但它会把整个文件提升到顶层作用域，破坏模块边界。例如：
// a.scss $color: red; @import "b"; // b.scss 里定义 $color: blue // 最终 $color 是 blue —— 且无 warning
而 Less 的 @import 是线性拼接，b.less 里改 @color 确实会覆盖前面的值，但这种“覆盖”是隐式、不可控的。
迁移时最容易踩的坑：直接替换 @ 为 $，却不重构导入逻辑
- 把
@import "reset.less";改成@use "reset";后，原来直接用的@reset-font会报错 —— 必须改成reset.$font或加as *（不推荐） -
@import支持multiple导入同一文件（如不同主题），@use不允许重复@use，需改用@forward+ 别名区分 - Less 项目常用
@import (reference)防止输出样式，Sass 没有等价语法，得靠@use+private命名约定（下划线前缀）模拟
模块系统不是语法替换问题，而是编译期作用域模型的根本切换
Less 的模块本质是“宏展开”，Sass 的模块本质是“符号绑定”。前者快但不可控，后者慢一点但可推理。如果你的构建流程里已有 Webpack 或 Vite，别指望靠插件抹平差异——less-loader 和 sass-loader 底层处理逻辑完全不同，强行混用只会让错误堆叠。真正要动的是 import 关系图和变量作用域设计。
