如何在 sass 版本的 Foundation 中设置按钮的背景颜色？答案

【问题标题】：How do I set the background-color of buttons in the sass version of foundation?如何在 sass 版本的 Foundation 中设置按钮的背景颜色？
【发布时间】：2013-09-20 02:55:55
【问题描述】：

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

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

但是，在 mixin 甚至那个文件中没有 $bg 的定义。

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

$bg 是在哪里定义的？

【问题讨论】：

标签： sass zurb-foundation

【解决方案1】：

我自己也有同样的困惑。问题是 $bg 在 mixin 声明中被赋值

@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 类

【讨论】：

自定义尺寸使用：@include button-size($button-tny)

【解决方案2】：

另一种方式

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

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

【讨论】：

我不知道你可以在 sass 中定义像这样的变量。这对你有用吗？我认为这是一个很好的解决方案

【解决方案3】：

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

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

【讨论】：