0

（这真的很难解释）我正在尝试在 Foundation 中创建一个新的按钮类，如下所示：

.btn {
  @extend .button;
  @extend .small;
  @extend .radius;
  @extend .secondary;
}

它工作正常并获取所有父样式，除了hover状态样式。
例如考虑这些：

<a href="button small secondary radius disabled" href="#">A button</a>
<!-- hover color is gray -->

和

<a href="btn disabled" href="#">A button</a>
<!-- hover color is white, but it should be gray -->

我试过这个，但没有奏效：

.btn {
  @extend .button;
  @extend .small;
  @extend .radius;
  @extend .secondary;
  .disabled {
    @extend .disabled;
  }
}

我正在使用带有 Rails 3.2.9 的 zurb-foundation gem。
知道如何解决吗？

编辑

这是生成的CSS：

.button.disabled, .disabled.btn, .btn .btn.disabled, .btn .button.disabled, .button[disabled], [disabled].btn {
  opacity: 0.6;
  cursor: default;
  background: #2ba6cb;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

.button.disabled :hover, .disabled.btn :hover, .button[disabled] :hover, [disabled].btn :hover {
  background: #2ba6cb;
}

.button.disabled.success, .disabled.success.btn, .button[disabled].success, [disabled].success.btn {
  background-color: #5da423;
}

.button.disabled.success:hover, .disabled.success.btn:hover, .button.disabled.success:focus, .disabled.success.btn:focus, .button[disabled].success:hover, [disabled].success.btn:hover, .button[disabled].success:focus, [disabled].success.btn:focus {
  background-color: #5da423;
  outline: none;
}

.button.disabled.alert, .disabled.alert.btn, .button[disabled].alert, [disabled].alert.btn {
  background-color: #c60f13;
}

.button.disabled.alert:hover, .disabled.alert.btn:hover, .button.disabled.alert:focus, .disabled.alert.btn:focus, .button[disabled].alert:hover, [disabled].alert.btn:hover, .button[disabled].alert:focus, [disabled].alert.btn:focus {
  background-color: #c60f13;
  outline: none;
}

.button.disabled.secondary, .disabled.btn, .btn .btn.disabled, .button[disabled].secondary, [disabled].btn {
  background-color: #e9e9e9;
}

.button.disabled.secondary:hover, .disabled.btn:hover, .button.disabled.secondary:focus, .disabled.btn:focus, .button[disabled].secondary:hover, [disabled].btn:hover, .button[disabled].secondary:focus, [disabled].btn:focus {
  background-color: #e9e9e9;
  outline: none;
}
4

2 回答 2

0

如果你想要的是一条捷径，button small secondary radius那么你为什么不扩展它呢？它应该产生更清洁的输出。

.btn
{
    @extend .button.small.secondary.radius;
}

还要确保在foundation.css 之后引用了您的自定义CSS，这可能会覆盖您。

于 2012-12-13T21:37:24.603 回答
0

经过一段时间的努力，我设法以这种方式解决了它：

.btn {
  @extend .button;
  @extend .secondary;
  @extend .radius;
  @extend .small;
  &.disabled {
    @extend .button;
    @extend .disabled;
}

现在它给了我正确的输出！

于 2012-12-19T08:36:36.993 回答