Sass构建卡片组件，提升代码复用性

Sass本身并不直接“构建”卡片，而是通过结构化设计思维——用带单位的语义化变量（如$card-border-radius）、职责清晰的@mixin（如card-base）封装视觉契约、以%placeholder（如%card-hoverable）抽象可复用状态逻辑、配合合理嵌套与BEM命名控制作用域——将CSS从零散像素堆砌升级为可维护、可预测、可协作的样式系统；真正提升复用性的不是语法糖，而是对“什么该参数化、什么该抽象、什么该交由HTML控制”的深度设计决策。

直接说结论：Sass 本身不“构建”卡片，它只是让 CSS 更容易被组织、参数化和复用；真正提升复用性的，是配合 $card-padding、@mixin card-base、%card-reset 这类结构化设计手段，把样式逻辑从“写死像素”转向“定义契约”。

用 @mixin 封装卡片基础样式，而不是重复写 border-radius 和 box-shadow

很多人一上来就给每个卡片写一遍 border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,0.1);，结果改个阴影色得全局搜替换。用 @mixin 把这些视觉契约收口，后续所有卡片都调用它：

@mixin card-base {
  border-radius: $card-border-radius;
  box-shadow: $card-shadow;
  background: $card-bg;
  overflow: hidden;
}

关键点在于：$card-border-radius 等变量必须提前定义在 _variables.scss 中，且值要带单位（如 8px），否则编译报错 Invalid CSS after "$card-border-radius"；同时，@mixin 不会生成实际 CSS，必须被 @include 调用才生效。

用 %placeholder 处理可选状态样式，避免无意义的类名爆炸

卡片常有 is-hoverable、is-clickable、is-loading 等状态，如果每个都写完整规则，HTML 里就得堆一堆类：class="card is-hoverable is-clickable"。更干净的做法是用占位符 + @extend：

%card-hoverable {
  transition: transform 0.2s, box-shadow 0.2s;
  &:hover {
    transform: translateY(-2px);
    box-shadow: $card-shadow-hover;
  }
}

.card {
  @extend %card-hoverable;
  // 其他基础样式
}

注意：@extend 会合并选择器，如果多个组件都 @extend %card-hoverable，最终生成的 CSS 可能出现长链选择器（如 .card, .product-card, .user-card:hover），影响可维护性；只对真正共用的、语义明确的状态用占位符，别为了“看起来高级”而滥用。

用嵌套 + & 控制作用域，但别超过三层

卡片内部常有 header、body、footer 结构，嵌套写法直观：

.card {
  &__header {
    padding: $card-padding;
    border-bottom: 1px solid $card-divider;
  }
  &__body {
    padding: $card-padding;
  }
  &__footer {
    padding: $card-padding;
    border-top: 1px solid $card-divider;
  }
}

这样生成的类名是 .card__header，符合 BEM 规范，也避免污染全局；但嵌套超过三层（比如 &__body &__title）会让 CSS 选择器权重陡增，且难以预测最终输出结构。实际中，&__body p 或 &__footer button 这类简单子元素选择就够了，复杂布局建议抽成独立组件或用 utility class。

真正卡住人的不是 Sass 语法，而是没想清楚“哪些该参数化”“哪些该抽象为占位符”“哪些该放 HTML 里控制”。变量命名是否带业务语义（比如 $card-bg-light 还是 $surface-soft），决定了团队协作时别人能不能一眼看懂你在改什么。

理论要掌握，实操不能落！以上关于《Sass构建卡片组件，提升代码复用性》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！