css - 自定义 Zurb Foundation 4 元素

Question

使用 Foundation 4 按钮允许您使用 mixin 自定义设计。这对大多数元素都是一样的。

但是，有很多设置是 mixins 不暴露给自定义的，例如：字体颜色、悬停效果、边框颜色

这些都是根据按钮背景颜色计算出来的。该按钮只是一个示例，但我对所有其他元素都有同样的问题。

是否有推荐的方法来自定义 mixin 未公开的部分？我不想进入源代码并更改实际的 mixin 定义。如果我的设计规范与 Foundation 默认值有很大不同，不使用 Foundation 会更好吗？

Answer 1

几乎每个设置都可以使用 SASS 变量进行自定义。最常见的变量可在_variables.scss中访问，但您可以覆盖实际组件 SCSS 文件中使用的任何其他变量。

对于还没有变量的值，您可以使用 CSS 覆盖样式并将覆盖包含在包装器 mixin 中。前任：

@mixin my-button-style($bg:$primary-color, $radius:false, $disabled:false) {
  @include button-style($bg, $radius, $disabled);

  /* CSS overrides go here */
  border-color: pink; /* etc */

}