如何在sass版本的基础中设置按钮的背景颜色？

Question

我想在sass的基础版本中更改按钮样式的背景颜色。

查看_buttons.scss的来源，我可以看到有一个名为'button-style'的mixin。在其中，'background-color'被赋予变量$ bg。

的值

但是，没有使用mixin甚至该文件定义$ bg。

我可以从该行中删除'$ bg'并添加自定义颜色，但这是一个会导致问题的肮脏解决方案。

$ bg定义在哪里？

Answer 1

我自己也有同样的困惑。事情是在混合声明

中为$ bg分配了一个值

@mixin button-style($bg:$primary-color...)

在这里

@mixin button($padding:$button-med, $bg:$primary-color,...) {
 ...
  @include button-style($bg, $radius, $disabled);
}

您可以在此处替换$ primary-color，但它会影响您的所有按钮。 更好的想法是创建一个新的按钮类，并使用您喜欢的颜色作为参数调用此mixin

.new-button{
  @include button-base;
  @include button-size;
  @include button-style(your-preferred-color);
}

编译并使用.new-button类

Answer 2

另一种方式

.new-button { $primary-color: #whatevercolor; @include button; }

由于您在声明中设置了$primary-color，因此范围包含在该声明中。

Answer 3

在$bg中设置_settings.scss不起作用，因为在Vinay Raghu已经解释过，它在mixin声明中被分配了一个值。好消息是a recent commit已经解决了这个问题。

当在下一版本的Foundation 5中发布时，通过更改_settings.scss，原始在哪里定义了$ bg？的答案将在$button-bg中{em>