Mixin 与继承

Mixin（混入）和继承是 Sass / SCSS 中两种实现样式复用的强大工具。Mixin 可以带参数灵活复用样式，继承则通过 @extend 复用已有选择器的规则。

---

1. Mixin（混入）

定义可复用的样式块，可带参数：

@mixin box-shadow($x, $y, $blur, $color) {
  box-shadow: $x $y $blur $color;
}

.card {
  @include box-shadow(2px, 2px, 6px, rgba(0,0,0,0.3));
  padding: 20px;
  border-radius: 8px;
}

---

2. 继承（@extend）

继承其他选择器的样式，避免重复代码：

.button {
  padding: 10px 20px;
  background-color: #3498db;
  color: #fff;
  border-radius: 4px;
}

.btn-primary {
  @extend .button;
  background-color: #e74c3c;
}

Mixin 与继承示例

loading