基础自定义 scss 类答案

【问题标题】：Foundation customizing scss classes基础自定义 scss 类
【发布时间】：2014-12-10 08:47:51
【问题描述】：

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

}

实现这一目标的优雅方法是什么？

【问题讨论】：

您可以尝试从.top-bar 中删除background-color 并将其手动添加到每个类中 - example。或者用!important 覆盖它

标签： css sass zurb-foundation

【解决方案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;

}

【讨论】：

【解决方案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/ 并向最优秀的人学习。

【讨论】：