17370845950

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;
  curs
or: pointer;
}
.btn {
@include button-base;
background: $color-primary;
}
.submit-btn {
@include button-base;
background: $color-success;
}

关键细节：

• mixins 支持参数，比如 @mixin button-base($bg: $color-primary)，让调用更灵活
• 不要把所有样式都塞进一个 button-all mixin —— 职责越细，复用率越高；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。别等上线后发现栅格错位才回头查。