在 Foundation 中扩展几个按钮类不会继承它们的悬停状态答案

【问题标题】：Extending several button classes in Foundation does not inherit their hover state在 Foundation 中扩展几个按钮类不会继承它们的悬停状态
【发布时间】：2013-09-23 20:07:32
【问题描述】：

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

【问题讨论】：

我创建了一个小提琴 (jsfiddle.net/zr3bM)，但我看不到您所看到的。无论如何，这两个项目都显示为灰色背景。那是从 HTML 直接复制/粘贴吗？你有 2 个 href 属性而不是 1 个 class 和 1 个 href （我在小提琴中修复了这些）。

标签： ruby-on-rails sass zurb-foundation compass-sass

【解决方案1】：

如果您想要的是button small secondary radius 的捷径，那么您为什么不扩展它呢？它应该产生更干净的输出。

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

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

【讨论】：

【解决方案2】：

苦苦挣扎了一阵子，终于这样解决了：

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

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

【讨论】：