scss @mixin

在SCSS（Sassy CSS）中，`@mixin`是一种定义CSS样式的预处理器指令。它允许你在一个地方定义一组CSS样式，然后在代码的其他地方通过使用`@include`指令来引用这些样式。

使用`@mixin`的好处是，你可以在多个地方重用相同的CSS代码，从而提高代码的可读性和可维护性。

以下是一个简单的示例，展示了如何使用`@mixin`：

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

.box {
  @include box-shadow(#fff 2px 2px, 0 0 10px #ccc);
}

.text {
  color: red;
  @include box-shadow(0 0 10px #ccc);
}

在上面的示例中，我们定义了一个名为`box-shadow`的`@mixin`，它接受五个参数：颜色、水平偏移、垂直偏移、模糊宽度和模糊距离。然后，在`.box`和`.text`类中，我们使用`@include`指令分别调用了这个`@mixin`来添加相应的阴影样式。

除了`box-shadow`，SCSS还提供了其他许多预定义的`@mixins`，例如边框样式、背景样式等。你可以根据需要自定义和创建自己的`@mixins`，以提高CSS编码的效率和可读性。