sass变量解决值复用，需在_variables.scss中语义化命名并集中管理；mixin解决规则块复用，应职责单一、支持参数；@extend慎用，优先选mixin。
用 $color-primary 这类变量统一颜色值，别再满处写 #3498db
硬编码颜色、字号、间距在多个选择器里重复出现，改一处漏三处。Sass 变量解决的是「值复用」问题，不是语法糖。
必须在 _variables.scss 里集中定义，且用语义化命名：
$color-primary: #3498db; $color-success: #2ecc71; $spacing-sm: 0.5rem; $font-size-base: 1rem;
使用时直接插值：color: $color-primary;。注意两点：
- 变量名带
$前缀，且只在 Sass 编译期生效，浏览器里看不到 - 避免用
$blue-500这类纯描述色值的命名，它会绑架语义——哪天设计把主色换成紫色，代码就自相矛盾 - 变量作用域要小心：局部声明的变量无法被其他文件访问，
@import顺序错会导致Undefined variable错误
用 @mixin button-base 抽离多处重复的按钮通用样式
当 .btn、.submit-btn、.action-link 都有 display: inline-flex + align-items: center + padding: 0.5rem 1rem 时，说明该上 mixin 了。
立即学习“前端免费学习笔记（深入）”；
它解决的是「规则块复用」，比变量更进一步：
@mixin button-base {
display: inline-flex;
align-items: center;
padding: 0.5rem 1rem;
border: none;
cursor: pointer;
}
<p>.btn {
@include button-base;
background: $color-primary;
}</p><p>.submit-btn {
@include button-base;
background: $color-success;
}关键细节：
- mixins 支持参数，比如
@mixin button-base($bg: $color-primary)，让调用更灵活 - 不要把所有样式都塞进一个
button-allmixin —— 职责越细，复用率越高；flex-center、truncate-text这种原子级 mixin 更实用 - 慎用含
@content的高级 mixin，调试时容易迷失样式来源
别把 @extend 当成救命稻草，它会让 CSS 输出失控
看到 .card-header 和 .modal-title 都用 font-weight: bold; color: #2c3e50;，第一反应不是写 @extend .card-header，而是问：这真是同一语义？
@extend 表面省代码，实际埋三个雷：
- 编译后 CSS 选择器会爆炸式增长，比如
.card-header, .modal-title, .alert-title全挤在同一行规则里，影响可维护性 - 无法跨文件
@extend（除非用@at-root搞复杂方案） - 和
@media嵌套混用时，输出逻辑极难预测，常出现断点样式丢失
真要复用视觉表现，优先选 mixin；只有完全同语义、同层级的组件才考虑 @extend，比如 .btn-primary 继承 .btn。
变量和 mixin 的边界在哪？看修改频率和影响范围
一个值改了，是否牵扯 10+ 个组件？—— 用变量。
一组声明改了，是否要同步更新按钮、表单控件、弹窗标题？—— 用 mixin。
实战判断口诀：
-
margin: $spacing-md→ 变量（改间距值，全站响应） -
@include responsive-font(1.2rem, 1.5rem)→ mixin（改响应式字体逻辑，不单是数值） -
background: darken($color-primary, 10%)→ 变量+函数组合，别硬塞进 mixin
最易被忽略的一点：Sass 变量不能动态计算，$width: 100% - $gutter 这种写法无效，得用 calc() 或 @function。别等上线后发现栅格错位才回头查。
