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

Question

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

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

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

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

$bg 在哪里定义？

score 2 · Accepted Answer

我自己也有同样的困惑。事情是 $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 类

score 1 · Accepted Answer

其他方式

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

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

score 0 · Accepted Answer

设置不起作用，因为正如 Vinay Raghu 已经解释的那样，它在 mixin 声明中被分配了一个值$bg。_settings.scss好消息是最近已经提交了修复此问题。

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

3 回答 3