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上查看此article。

<强>扩展

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

.base {
  @include base;
}

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

它也扩展了所有嵌套选择器

无法扩展嵌套选择器

您无法在媒体查询中扩展到媒体查询之外定义的选择器