必须抽成单独文件的配置项有三类：设计系统级变量（如$color-primary）、无上下文工具mixin（如text-truncate()）、纯状态修饰类（如.card--hoverable）；需用@use隔离作用域，命名统一为\_foundations.variables.scss等，且配置文件禁止含选择器或样式规则。
哪些配置项必须抽成单独文件
不是所有 Sass 变量都值得拆，但以下三类不单独抽离，后期改起来基本等于重写：
-
$color-primary、$spacing-md、$font-size-base这类设计系统级变量 → 必须放进_foundations.variables.scss -
text-truncate()、visually-hidden()这类无上下文的工具 mixin → 单独建_tools.mixins.scss -
.card--hoverable、.btn--outline这类纯状态修饰类 → 放_card.modifiers.scss，和主体样式解耦
混在一起的后果很直接：加个暗色模式时，background-color 全局搜替换，结果漏掉某处嵌套里的 &__header 下的值；换品牌色时，$blue-500 在五个文件里被重复定义，改了三个忘了两个。
@use 而不是 @import 来加载配置文件
@import 会让变量、函数、mixin 全局污染，一个 _card.scss 里改了 $border-radius，可能让 _button.scss 和 _modal.scss 的圆角同时变形。用 @use 才能真正隔离作用域：
@use 'base/foundations' as *;
@use 'base/tools' as tools;
<p>.card {
border-radius: $border-radius-sm;
padding: $spacing-lg;</p><p>&__title {
@include tools.text-truncate();
}
}注意：as * 是显式展开全部成员，但更推荐用命名空间方式（如 @use 'base/foundations' as f;），避免冲突；@use 必须放在文件最顶部，且每个路径只能 @use 一次。
立即学习“前端免费学习笔记（深入）”；
使用ydata-profiling（前身为pandas-profiling）生成全面的数据质量报告，包含相关性分析、缺失值模式和基数检测。导出交互式HTML仪表板和JSON摘要。
文件命名与路径约定要严格统一
局部文件（partials）必须以下划线开头，否则会被误编译成独立 CSS 文件。常见错误是把 variables.scss 写成 _variables.scss —— 看似只差一个下划线，但前者会被 Webpack 当作普通入口文件处理，后者才是 Sass 认可的 partial。
- 变量文件：固定用
_foundations.variables.scss，不叫_vars.scss或_theme.scss - 工具 mixin：统一放
_tools.mixins.scss，不混进_utils.scss - 组件配置项（如卡片的默认 padding、最大宽度）：归到
_card.config.scss，而非塞进_card.scss主体逻辑里
路径层级也别太深，@use 'src/scss/base/_foundations.variables' 这种写法容易出错，建议用别名 alias（Webpack 的 resolve.alias 或 Dart Sass 的 --load-path）映射到 @use 'base/foundations'。
配置文件里禁止写选择器或具体样式规则
配置文件只负责“声明”，不负责“应用”。一旦在 _foundations.variables.scss 里写了 body { font-family: $font-sans; }，它就不再是配置，而是样式逻辑泄漏——后续无法被其他主题文件覆盖，也无法做条件编译。
真正该出现的内容只有：
- 变量定义：
$font-sans: 'Inter', -apple-system, sans-serif; - mixin 声明：
@mixin visually-hidden { ... } - 函数定义：
@function rem($px) { @return ($px / 16px) * 1rem; }
哪怕只多一行 .sr-only { @include visually-hidden(); }，这个文件就失去了“配置”意义，变成样式组装的一部分，拆分价值归零。
