覆盖基础按钮答案

【问题标题】：Overwrite foundation buttons覆盖基础按钮
【发布时间】：2014-03-23 01:30:12
【问题描述】：

文档 (http://foundation.zurb.com/docs/components/buttons.html) 没有说明更改按钮的背景。如何在 sass (custom.scss) 中做到这一点？

我无法创建新的按钮类，因为我需要更改 Drupal 中生成组件的样式。

【问题讨论】：

【解决方案1】：

如果不能新建类，就不能扩展已有的类吗？

你可以这样做：

button,
.button,
a.button,
input.button
{
  background-color: green;
}

【讨论】：

这不是基础方式

【解决方案2】：

由于我无法添加评论，所以我将其写为答案。你想改变所有按钮的背景颜色吗？有一个文件供您自定义这些设置，默认情况下这些都是注释的。您会发现一些背景颜色设置行，如下所示：在 Foundation 5 中，它位于 _setting.scss

// $primary-color: #008CBA;
// $secondary-color: #e7e7e7;
// $alert-color: #f04124;
// $success-color: #43AC6A;
// $warning-color: #f08a24;
// $info-color: #a0d3e8;

取消注释您要自定义设置的行并根据需要更改颜色值。在定义按钮样式的文件中，@import 具有自定义设置的文件（在本例中为_settings.scss）。这也会改变导入自定义设置文件的其他元素的颜色。

另一种方法，转到@mixin button 的定义并根据需要更改$bg 的值。

&.secondary { @include button-style($bg:$secondary-color); }
  &.success   { @include button-style($bg:$success-color); }
  &.alert     { @include button-style($bg:$alert-color); }

&.disabled, &[disabled] { @include button-style($bg:$primary-color, $disabled:true);
    &.secondary { @include button-style($bg:$secondary-color, $disabled:true); }
    &.success { @include button-style($bg:$success-color, $disabled:true); }
    &.alert { @include button-style($bg:$alert-color, $disabled:true); }

【讨论】：

【解决方案3】：

在您的 SCSS 文件中尝试这些属性。

$button-background  - Background color of the button.

$button-background-hover - Background color of the button on hover. 

$button-color - Text color of the button.

来源：Foundation CSS - Buttons

【讨论】：