Sass实现CSS模块化的核心是@use隔离作用域+_partials拆分职责+@mixin封装逻辑+BEM约束嵌套；@import会全局注入导致变量覆盖和命名冲突，而@use强制私有命名空间（如v.$primary-color），避免污染与不可控覆盖。
直接说结论：Sass 实现 CSS 模块化，核心不是“多建几个文件”，而是用 @use 隔离作用域 + _partials 拆分职责 + @mixin 封装可变逻辑 + BEM 命名约束嵌套边界。不按这套组合来，模块化反而会加剧命名冲突和构建臃肿。
为什么 @use 必须替代 @import
旧版 @import 会把所有变量、mixins 全部注入当前作用域，一个 _buttons.scss 里定义了 $border-radius，另一个 _forms.scss 也定义同名变量，编译时不会报错，但值会被后引入的覆盖——你改按钮圆角，登录框边框也跟着变了。
@use 默认私有，必须显式调用才可用：
- 写
@use "variables" as v;，就得用v.$primary-color，不会和别的$primary-color冲突 - 想暴露全部成员？得加
as *，但这是反模式，只在极简项目里临时用 - 循环依赖会直接报错：
A tried to load B, but B already loaded A，这反而是好事——逼你理清依赖链
_partials 文件怎么命名和组织才不踩坑
下划线前缀（如 _variables.scss）只是告诉 Sass “这是局部文件，别单独编译成 CSS”，但它不自动解决污染问题。真正关键的是拆分维度：
立即学习“前端免费学习笔记（深入）”；
- 按用途拆，不是按页面拆：
_colors.scss、_spacing.scss、_breakpoints.scss，而不是一个大而全的_variables.scss - 组件样式文件必须以组件名为主：
_button.scss负责.button及其所有子元素（&__icon、&--large），不掺杂布局逻辑 - 避免
../../../路径：Webpack/Vite 配resolve.alias把@styles映射到src/styles，统一写@use "@styles/variables"
BEM + & 嵌套如何守住模块边界
Sass 嵌套本身不模块化，它只是语法糖。真正起作用的是嵌套 + BEM + @use 三者绑定：
- 根选择器必须是 BEM 块名：
.card { ... }，不是article .card或div.card - 子元素一律用
&__title，修饰符用&--compact，禁止写.card h2这种强耦合后代选择器 - 嵌套不超过 3 层：
.card { &__header { &__title { } } }编译后是.card__header__title，语义已失，权重也飙升，不如拆成独立块 - 伪类必须带
&：&:hover编译为.button:hover；漏掉&就变成.button :hover（空格是后代选择器），鼠标悬停永远不生效
最容易被忽略的一点：模块化不是让每个文件都“看起来很干净”，而是让每次修改的影响范围可预测。比如改 _spacing.scss 里的 $spacing-md，你得清楚它只会影响 @use "spacing" 的那些组件，不会波及第三方 UI 库或遗留样式——这靠的不是自觉，是 @use 的硬隔离机制和目录结构的显式约定。
