@use 替代 @import 实现模块隔离：@use 创建私有命名空间，需前缀引用；&结合bem生成带域标识类名；%占位符比@mixin 更安全复用；@forward 精确控制暴露粒度。
用 @use 替代 @import 强制模块隔离
直接结论：@import 是全局拼接，必然导致变量、mixin、函数互相覆盖；@use 则默认创建私有命名空间，不加前缀就报 Undefined variable 错误，从根源上掐断冲突路径。
常见错误是把旧项目里的 @import "variables" 简单替换成 @use "variables"，但没改调用方式——比如仍写 $primary-color，结果编译失败。正确做法是：@use "variables" as v，然后所有引用必须带前缀 v.$primary-color。
-
@use必须放在文件最顶部，不能嵌套在@media或选择器里，否则报Invalid CSS after "@use" - 同一模块在单个文件中多次
@use不会重复执行，但@use "x" as a和@use "x" as b会被视为两个独立命名空间 - 混用
@import和@use会导致整条依赖链降级为 legacy 模式，所有命名空间失效
用 & + BEM 风格生成隔离类名
嵌套本身不解决命名冲突，.card { .title { ... } } 编译后是 .card .title，仍可能和全局 .title 打架。真正起作用的是显式绑定父级的 &__title 写法。
例如：.card { &__header { font-size: 1.2rem; } &__body { padding: 1rem; } } 会生成 .card__header 和 .card__body，类名自带组件域标识，不依赖 DOM 层级，也不怕被外部样式干扰。
-
&必须紧贴选择器，& __header（中间有空格）会变成全局__header，完全失效 - 前缀建议用业务/组件名（如
auth-、dash-），避免泛化词如my-或custom- - 不要对动态插值类名（如
.u-mt-#{$n}）用%placeholder，它不支持插值，会报"%placeholder" is not a valid selector
用 %placeholder 替代 @mixin 复用原子样式
当复用重置类、辅助类（如 %sr-only、%clearfix）时，% 比 @mixin 更安全——它只在 @extend 处生成 CSS，不会复制代码，也不会把选择器暴露成真实类名。
典型错误是写 @include reset，里面定义了 .icon，结果多个地方调用，.icon 样式被反复插入，还可能意外覆盖全局 .icon。
-
%占位符不能单独出现在输出 CSS 中，必须被@extend，天然防泄漏 -
@extend支持跨文件继承，但被继承的%必须已通过@use或@forward引入当前作用域 - 第三方库若未适配模块系统（如 Bootstrap 4），仍需
@import，此时应将其包裹进独立 partial，并用$prefix重命名 class 前缀（如$prefix: "bs4-"）
@forward 控制模块对外暴露粒度
封装 UI 模块（如 _card.scss）时，别一股脑 @use "card" 或全量 @import，用 @forward 精确控制哪些变量、mixin 可被下游访问。
错误做法是把所有东西塞进一个入口再 @import，下游一用就撞上 $border-radius、card-shadow() 这类重名项。
-
@forward "card" show $size-medium, @mixin card-hover只暴露指定成员，其余自动隐藏 -
@forward "card" hide $private-token更适合过滤内部常量 - 加
as card-后，下游必须写card-$size-medium，彻底切断命名耦合
真正的难点不在语法本身，而在于团队能否统一约束：所有新模块强制 @use、所有组件样式必须用 &__xxx、所有原子复用优先选 %。一旦某处松动，污染就会沿依赖链扩散，且很难定位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
