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

しばらく苦労した後、私はこの方法でそれを解決することができました：

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

これで正しい出力が得られます。

于 2012-12-19T08:36:36.993 に答える
0

あなたがしようとしていることが近道であるbutton small secondary radiusなら、それを延長してみませんか？よりクリーンな出力が生成されるはずです。

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

また、カスタム CSS がfoundation.css の後に参照されていることを確認してください。

于 2012-12-13T21:37:24.603 に答える