@use强制模块隔离可避免命名冲突，因它创建私有命名空间、需前缀访问变量/混入，而@import是全局拼接易覆盖；混用二者将致整链降级为legacy模式。
用 @use 强制模块隔离，别碰 @import
旧项目直接把 @import 换成 @use 就报错，不是语法问题，是作用域逻辑变了：@import 是全局拼接，所有变量、@mixin、@function 全部平铺进同一个命名空间；@use 默认私有，不加前缀就访问不到。
常见错误现象：
- 写了
@use "variables"，还在样式里写$primary-color→ 编译报Undefined variable "$primary-color" -
@use放在.card { }里面 → 报Invalid CSS after "@use" - 混用
@import "mixins"和@use "variables"→ Sass 直接警告并中断编译，整条依赖链降级为 legacy 模式
实操建议：
- 所有
@use必须放在文件最顶部，且不能嵌套 - 统一用具名前缀，比如
@use "base/variables" as v，然后写v.$primary-color - 第三方库如
sass:map也必须@use "sass:map"，不能@import - Bootstrap 4 及更早版本不支持
@use，需单独包裹进_bootstrap-legacy.scss并用$prefix重命名 class 前缀
根选择器加业务前缀 + &__element 生成强隔离类名
Sass 嵌套本身不防冲突，.modal { .header { } } 编译后还是 .modal .header，照样和全局 .header 打架。真正起作用的是显式绑定父级的 &__header 写法。
常见错误现象：
- 写成
& __header（中间有空格）→ 编译出全局__header类，完全失效 - 用泛化前缀如
my-或custom-→ 多人协作时照样撞车 - 对动态插值类名（如
.u-mt-#{$n}）用%placeholder→ 报"%placeholder" is not a valid selector
实操建议：
- 根选择器必须带业务/组件级前缀，如
.auth-login、.dash-sidebar - 子元素一律用
&__body、&__footer，确保生成.auth-login__body这类强绑定类名 - 伪类和媒体查询继续用
&:hover、&@media，保持前缀约束 - 避免 BEM 的完整修饰符（如
--large），优先用语义化前缀 + 简洁结构
用 %placeholder 替代 @mixin 复用原子样式
当复用重置类、辅助类（如 %sr-only、%clearfix）时，% 比 @mixin 更安全——它只在 @extend 处生成 CSS，不会复制代码，也不会把选择器暴露成真实类名。
常见错误现象：
- 写
@include reset，里面定义了.icon→ 多个地方调用，.icon样式被反复插入，还可能覆盖全局.icon -
%占位符单独出现在输出 CSS 中 → 实际不会发生，因为 Sass 不允许未被@extend的%输出
实操建议：
- 基础工具类、重置类统一用
%，比如%reset-focus、%text-truncate -
@extend跨文件可用，但被继承的%必须已通过@use或@forward引入当前作用域 - 不要对插值类名用
%，它不支持#{$n}这类动态内容
@forward 精准控制模块暴露粒度
封装 UI 模块（如 _card.scss）时，别一股脑全量公开或全量私有。@forward 是唯一可控方式：它不执行模块代码，只透出声明；下游 @use 才真正触发执行，避免重复计算。
常见错误现象：
- 聚合入口文件写一堆
@import→ 下游一用就撞上$border-radius、card-shadow() - 用
@use "theme" as *和@use "button" as *→ 编译直接失败，提示"$size-large" is defined multiple times
实操建议：
- 用
@forward "card" show $size-medium, @mixin card-hover显式暴露指定成员 - 用
@forward "card" hide $private-token过滤内部常量 - 加
as card-前缀，下游必须写card-$size-medium，彻底切断命名耦合 -
@forward不执行模块，所以不会触发变量计算或副作用，适合做纯接口层
最易被忽略的一点：CSS Modules 和 Sass 模块系统不是二选一，而是分层协作——Sass 解决编译时命名冲突，CSS Modules 解决运行时 DOM 渲染冲突。如果构建工具支持（如 Webpack/Vite），Button.module.scss + @use 是目前最稳的组合。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
