0

twitter-bootstrap で、独自の css ラベル クラスを定義しようとしていますが、エラーが発生しました。

.label-info は、このファイル で次のように定義されています。

// Colors
// Only give background-color difference to links (and to simplify, we don't qualifty with `a` but [href] attribute)
.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%); }
  // Success (green)
  &-success           { background-color: @successText; }
  &-success[href]     { background-color: darken(@successText, 10%); }
  // Info (turquoise)
  &-info              { background-color: @infoText; }
  &-info[href]        { background-color: darken(@infoText, 10%); }
  // Inverse (black)
  &-inverse           { background-color: @grayDark; }
  &-inverse[href]     { background-color: darken(@grayDark, 10%); }
}

私が欲しいのは my_label.css.less にあります:

@import "twitter/bootstrap";

.my_label{
    .label;
    .label-info;
}

の.label works

しかし.label-info、私にエラーを与えます:.label-info is undefined

.label-infoでは、どうすればクラスに含めることができますか?

私はレールとless-rails-bostrap gemを使用しています。

4

2 に答える 2

2

コードがほとんど含まれていないため、特にラベルの修飾子クラスを使用して、やろうとしていることにはあまり利点がありません。あなたの例からわかるように、コード.label-infoは基本的に

.label {
  &-info              { background-color: @infoText; };
}

例のように .label クラスを新しいクラスと本当に結合したい場合は、次の.labelようにコードを減らすためにクラスとグループ化することをお勧めします。

.label,
.label-notice {
  // declarations
}

ただし、これは、ブートストラップの明確な利点とベスト プラクティスの 1 つを否定していることに注意してください。

カスタム クラスに関しては、他の修飾子と同じパターンを使用して新しいセマンティック クラスを追加し、次の.label-infoように に定義された背景色を使用することをお勧めします。

.label,
.badge {
  // Info (turquoise)
  &-info              { background-color: @infoText; }
  &-info[href]        { background-color: darken(@infoText, 10%); }
  ...

  // Notice (your custom class)
  &-notice            { background-color: @infoText; // extend with your properties here }
}
于 2012-10-13T11:20:14.747 に答える
0

私も同じ質問したいです。

そして、これを解決するアイデアがあり ます。bootstrap.cssを bootstrap.less に変更してインポートすると、.label と .label-info の両方、および他のすべてのクラスを使用できます。

less将来、この「機能」をサポートできることを願っています。

「mixin」で検索したless-1.3.3.jsところ、次のことがわかりました。

            //
            // A Mixin call, with an optional argument list
            //
            //     #mixins > .square(#fff);
            //     .rounded(4px, black);
            //     .button;
            //
            // The `while` loop is there because mixins can be
            // namespaced, but we only support the child and descendant
            // selector for now.
            //

なので、名前空間付きの mixin は将来的にサポートされると思います。

于 2013-02-21T14:48:45.437 に答える