如何将一个规则导入到sass中的另一个规则中？

Question

如果我有这个

.base {
    color:red;
}

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

如何将其更改为类似

.base {
    color:red;
}

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

没礼貌 我基本上不想重复基本的东西，我想导入它的属性。

有人知道吗？

谢谢

Answer 1

米辛

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

与下面的示例相比，我建议使用更语义化的命名系统。

@mixin base {
  color: red;
}

.base {
  @include base;
}

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

有关 mixin 指令的更多信息，请查看 Sitepoint 上的这篇文章。

延长

CSS Tricks很好地阐述了extend也可以使用的功能，但它有一些怪癖。

.base {
  @include base;
}

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

• 它还扩展了所有嵌套选择器
• 它无法扩展嵌套选择器
• 您无法在媒体查询内部扩展到媒体查询外部定义的选择器

来自CSS 技巧