Question

我正在尝试自定义基础的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;

}

这是实现这一目标的优雅方式吗？

Answer 1

当您使用$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;

}

Answer 2

首先，在两个类名中扩展.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;
}

希望这有帮助。如果您想了解更多关于Scss的信息，请访问Hugo Giraudel的博客http://hugogiraudel.com/，并向他们学习。

基础定制scss类

2 个答案: