覆盖基础按钮

Question

文档（http://foundation.zurb.com/docs/components/buttons.html）没有说明有关更改按钮的背景。我如何在sass（custom.scss）中执行此操作？

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

Answer 1

如果你不能创建一个新的类，你不能只扩展现有的类吗？

你可以只是这样做：

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

Answer 2

因为我不能添加评论，所以我将只是把它写一个答案。你想改变所有按钮的背景颜色吗？有一个文件供您自定义这些设置，默认情况下会对这些设置进行评论。你会发现这样的背景颜色设置一些行： 在基金会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); }