15

Twitter ブートストラップのスタイルを使用していますが、継承について質問があります。

ブートストラップからラベル スタイルを継承する 2 つのラベル クラスを作成したいと思います。

.label-new {
    .label; .label-important;
}
.label-updated {
    .label; .label-warning;
}

ただし、ブートストラップで以下を使用して .label-important と .label-warning が定義されているため、上記では LESS 解析エラー "NameError: .label-important is undefined" が発生します。

.label,
.badge {
  // Important (red)
  &-important         { background-color: @errorText; }
  &-important[href]   { background-color: darken(@errorText, 10%); }
  // Warnings (orange)
  &-warning           { background-color: @orange; }
  &-warning[href]     { background-color: darken(@orange, 10%); }
}

.label-important/warning を継承する特別な構文はありますか?

前もって感謝します。

4

1 に答える 1

11

私はあなたが.label与えるべきであるもの.label-new-important（.label-new-warningそしてと同等のものupdated）だけを継承することができると思います。それが望ましくなく、新しく追加された拡張機能が必要な場合は、必要な.labelものを分離して定義するために、色を直接再度定義する必要があります。そのようです：

.label { 
  // New (red) 
  &-new           { background-color: @errorText; } 
  &-new[href]     { background-color: darken(@errorText, 10%); } 
  // Updated (orange) 
  &-updated       { background-color: @orange; } 
  &-updated[href] { background-color: darken(@orange, 10%); } 
}

編集（色を再定義したくないがミックスインを使用する場合）

色の再定義を回避するには、元の定義を変更して、次のようにする必要があります。

.labelまず、元の定義と定義を削除し、.badge次に、次のようにそれらをより明示的に定義します。

.label-important,
.badge-important {
  // Important (red)
  { background-color: @errorText; }
  { background-color: darken(@errorText, 10%); }
}

.label-warning,
.badge-warning {
  // Warnings (orange)
  { background-color: @orange; }
  { background-color: darken(@orange, 10%); }
}

.label-new {
    .label-important;
}

.label-updated {
    .label-warning;
}
于 2012-05-08T19:32:44.860 に答える