css 想减少重复 css 样式怎么办_使用 css sass 变量与 mixin 管理样式_技术教程

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;
}
.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。