如何将规则导入SASS中的另一个规则

Question

如果我有这个

.base {
    color:red;
}
.variation1 {
    color:red;
    border:1px solid black;
}

如何将其更改为

之类的东西

.base {
    color:red;
}
.variation1 {
    import @.base
    border:1px solid black;
}

sass？我基本上不想重复基本内容，我想导入其属性。

有人知道吗？

谢谢

Answer 1

mixin

您可以创建一个mixin来创建可重复使用的CSS块。这可以帮助您避免重复代码。

我建议与以下样本相比，一个更语义的命名系统。

@mixin base {
  color: red;
}
.base {
  @include base;
}
.variation1 {
  @include base;
  border:1px solid black;
}

有关Mixin指令的更多信息，请在SitePoint上查看本文。

扩展

css技巧在extend功能上很好地详细说明，但它有一些怪癖。

.base {
  @include base;
}
.variation1 {
  @extend .base;
  border:1px solid black;
}

• 它也扩展了所有嵌套的选择器
• 它不能扩展嵌套的选择器
• 您无法在媒体查询中扩展到媒体查询外定义的选择器

来自CSS技巧