在Sass混合器中，你可以包含任意的CSS规则，就像你在普通的样式规则中所做的那样。这使得混合器非常灵活，可以包含任何你需要的样式。

下面是一个示例，演示了如何在混合器中包含CSS规则：
// 定义一个混合器，包含了一些基本的按钮样式
@mixin button-styles {
  padding: 10px;
  border: 1px solid #ccc;
  background-color: #f0f0f0;
  color: #333;
  
  // 包含一个嵌套的CSS规则
  &:hover {
    background-color: #ddd;
  }

  // 包含一个嵌套的CSS规则和变量
  &.primary {
    background-color: $primary-color;
    color: #fff;
  }
}

// 定义一个颜色变量
$primary-color: #3498db;

// 使用混合器
.button {
  @include button-styles;
}

.primary-button {
  @include button-styles;
  @extend .button; // 通过@extend继承另一个类的样式
}

在这个例子中，button-styles 混合器中包含了一些基本的按钮样式，还包括了两个嵌套的CSS规则。然后，在 .button 和 .primary-button 类中分别使用了这个混合器。注意，在 .primary-button 中，除了使用混合器外，还使用了 @extend 来继承 .button 类的样式。

这个例子突显了混合器的灵活性，你可以在混合器中包含任何你需要的CSS规则，使得代码更加模块化和易于维护。


转载请注明出处：http://www.zyzy.cn/article/detail/4337/sass