sass样式工程化核心是类名、变量、文件结构三者解耦。需按顺序@import变量/混入文件，改用@use避免冲突；bem扁平命名（&__elem）替代嵌套；变量仅定义原子值，组件内计算组合；路径反映职责，禁用筐型文件。
直接用 Sass 做样式工程化，核心不是“多写嵌套”或“堆功能”，而是把类名、变量、文件结构三者解耦，让修改颜色不牵扯 HTML，改按钮尺寸不翻遍 20 个文件，加新组件不污染全局命名空间。
为什么 @import 顺序一错，$color-primary 就 undefined？
Sass 变量作用域是“声明即生效、就近向上找”，@import 不是拼接文本，而是按顺序执行编译上下文。如果 _buttons.scss 在 _variables.scss 前被 @import，那里面所有对 $color-primary 的引用都会报错。
- 必须把
_variables.scss、_mixins.scss放在所有其他 partial 的最前面 - 禁用
@import "components/*"这类通配导入——它不保证顺序，且 IDE 难跳转 - 用
@use替代@import（Sass 1.23+），它强制显式命名空间，避免变量冲突：@use 'variables' as v;，然后写v.$color-primary - 旧项目迁移时，先全局搜索
@import，按依赖关系手动排好序，再逐步切到@use
&__element 和普通嵌套 .card .title 输出结果完全不同
写 .card { .title { color: red; } }，编译出来是 .card .title（层级选择器）；写 .card { &__title { color: red; } }，输出是 .card__title（BEM 扁平类名）。前者权重高、复用差、HTML 必须套两层；后者可独立使用、支持 JS 动态增删、能被 PurgeCSS 安全剔除。
- 所有组件根选择器必须是块名，如
.btn、.modal，禁止写.ui-btn或.c-button这类语义模糊前缀 - 只允许
&__icon、&--disabled、&:hover（仅限伪类，不用作状态控制） - 遇到媒体查询或伪类要脱离嵌套时，用
@at-root：@at-root .btn--large:hover { ... }，而不是.btn { @at-root &--large:hover { ... } }（后者仍会带 .btn 前缀） - 状态类（
--hover、--focused）必须由 JS 控制增删，不能靠 CSS 自动推导
怎样让 _button.scss 不依赖 _layout.scss 却还能用栅格间距？
模块之间不该有隐式依赖。按钮不需要知道布局系统怎么实现 grid-gap，它只该关心“我需要多少内边距”。把设计系统参数抽成原子变量，和组件逻辑彻底隔离。
- 变量只定义基础值：
$space-xs: 4px;、$space-sm: 8px;、$space-md: 16px;，不出现$button-padding这种带组件语义的变量 - 组件内部用计算表达式组合：
padding: $space-sm $space-md;，而不是padding: $button-padding; - 如果真需跨模块复用逻辑（比如按钮高度要匹配输入框），用
@function封装规则：@function input-height() { @return $space-md * 3; }，比变量更可控 - 所有 partial 文件路径要反映职责，例如
base/_spacing.scss、components/_button.scss，禁止出现shared/_common.scss这种筐型文件
BEM 类名扁平化、@use 显式依赖、变量去组件语义——这三点卡死了，后续加主题、做 SSR 样式提取、对接 Design Token 系统才不会返工。很多人卡在“看起来能跑”，但改一个颜色要 grep 全局、加一个状态要修三个文件，问题就出在最初没把这三层边界划清楚。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
