Ruby on rails 在基础中扩展多个按钮类不继承它们的悬停状态 （这很难解释）我想在这个基础上创建一个新的按钮类： .btn { @extend .button; @extend .small; @extend .radius; @extend .secondary; }

它工作正常，可以获取所有父样式，除了

悬停

状态样式。
例如，考虑这些：

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

我将zurb foundation gem与Rails 3.2.9一起使用。
知道怎么修吗

编辑

以下是生成的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;
}

---

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

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

---

也要确保您的自定义CSS在基础之后被引用。CSS可能会超过您。

挣扎一段时间后，我设法这样解决：

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

现在它给了我正确的输出

我创建了一个fiddle（），但我看不到您看到的内容。无论发生什么情况，这两个项目都会以灰色背景显示。这是HTML的直接复制/粘贴吗？您有2个

href

属性，而不是1个

class

和1个

href

（我在小提琴中修复了这些属性）。

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

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