自定义SCSS类的基础 我试图自定义基础的SCSS，为TopBar有两个不同的类。我对scss的了解有限，因此更改_settings.scss是非常简单的第一步，它的问题是它会更改全局样式。我想在不弄乱全球风格的情况下做一些类似以下的事情 .my-topbar-first { $topbar-bg-color: $red; @extend .top-bar; } .my-topbar-second { $topbar-bg-color: $green; @extend .top-bar; }

使用

$topbar bg color:$red

它将

$topbar bg color

变量设置为

$red

变量中的值。当您再次使用它时，它会弄乱上一个设置。 所以相反， 你必须这样做：

.my-topbar-first {
 background-color: $red;
 @extend .top-bar;

}

.my-topbar-second {
 background-color: $green;
 @extend .top-bar;

}

---

首先，在扩展两个类名中的

.top bar

时，您正在复制代码。一种更为干燥的方法如下所示：

.my-topbar-first,
.my-topbar-second {
  @extend .top-bar;
}

.my-topbar-first {
 background-color: $red;
}

.my-topbar-second {
 background-color: $green;
}

使用

@extend

或

@include

时，如果您声明属性，它们应始终位于第一行，例如：

my-topbar-second {
     @extend .top-bar;
     background-color: $green;
     color: $white;
     font-size: $top-bar-fontsize;
    }

如果您有更多的

.top bar foo

实例，您实际上可以编写for循环，例如：

$class-slug: top-bar;

@for $i from 1 through 2 {
  .#{$class-slug}-#{$i} {
     background-color: $color-#{$i};
  }
}

你会得到：

.top-bar-1 {
  background-color: $color-1;
}

.top-bar-2 {
  background-color: $color-2;
}

---

希望这有帮助。如果您想了解更多关于SCS的信息，请访问Hugo Giraudel的博客，从最好的地方学习。

您可以尝试从

顶栏中删除
背景色
，并将其添加到每个课程手册-。或者用
覆盖它！重要信息