Question

使用Foundation 4按钮可以使用mixins自定义设计。对于大多数元素来说都是一样的。

但是，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 */

}

定制Zurb Foundation 4 Elements

1 个答案: