Question

（这很难解释）我正在尝试在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;
}

Answer 1

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

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

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

Answer 2

经过一段时间的努力，我设法解决了这个问题：

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

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

在Foundation中扩展几个按钮类不会继承其悬停状态

2 个答案: