# Mixin 与继承

URL: https://caijiao.org/css/12-preprocessor/03-mixin-inheritance
Source: docs/css/12-preprocessor/03-mixin-inheritance.md
Description: Sass / SCSS 的 Mixin 和继承机制，帮助复用样式代码，提高开发效率和代码维护性。

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

---

## 1. Mixin（混入）

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

```scss
@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）

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

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

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

## Mixin 与继承示例

[在线代码演示](/css/demos/38.html)