7

Crunch / WinLESSを使用してBootstrap 3をコンパイルすると、特定のスタイルが壊れる理由がわかりません。このコードを名前空間のブートストラップに使用しています。

.namespace-bs {
    @import "less/bootstrap.less";
}

ほとんどのスタイルでうまく機能しますが、次のようになるものもいくつかあります。

.btn-primary .namespace-bs .caret,.btn-success .namespace-bs .caret,.btn-warning .namespace-bs .caret,.btn-danger .namespace-bs .caret,.btn-info .namespace-bs .caret{border-top-color:#fff;}

私が彼らがこのようになると私が期待するとき：

.namespace-bs .btn-primary .caret,.namespace-bs .btn-success .caret,.namespace-bs .btn-warning .caret,.namespace-bs .btn-danger .caret,.namespace-bs .btn-info .caret{border-top-color:#fff;}

コンパイラに何か問題があるのでしょうか、それとも LESS コードにバグがありますか?

ありがとう

4

2 に答える 2

13

あなたの問題の詳細

Seven-phases-max で説明されているように、「ネストされたセレクターに&が追加された場合」に名前の間隔に問題があります。したがって、Bootstrap コードの一部は次のようになります。

.caret {
  .btn-default & {
    border-top-color: @btn-default-color;
  }
  .btn-primary &,
  .btn-success &,
  .btn-warning &,
  .btn-danger &,
  .btn-info & {
    border-top-color: #fff;
  }
}

のすべてのインスタンスが完全な入れ子構造&に置き換えられることを思い出してください。そのため、そのまま名前空間を作成すると、効果的に次のようになります。

.namespace-bs {
  .caret {
    .btn-default & {
      border-top-color: @btn-default-color;
    }
    .btn-primary &,
    .btn-success &,
    .btn-warning &,
    .btn-danger &,
    .btn-info & {
      border-top-color: #fff;
    }
  }
}

そして、完全にネストされた構造が置換.namespace .caretのポイントにある&ため、セレクターが次のように見えるのはそのためです.btn-primary .namespace-bs .caret。

LESS 1.4+ の回避策

以下が機能するはずです。

  1. 通常どおり、LESS コードからブートストラップをファイルにコンパイルしbootstrap.cssます。これにより、すべての LESS が「通常の」ブートストラップ CSS コードに解決&され、どこで使用されても期待どおりに機能します。

  2. 次に、名前間隔の LESS ファイルで、次のようにします。

.namespace-bs {
    @import (less) "css/bootstrap.css";
}

私たちが行っているのは、コンパイルされたbootstrap.cssファイル (&完全にコンパイルされているため、これ以上の値はありません) をインポートすることですが、インポートする際に、型キャストを に配置することで、CSS を LESS コードとして扱うように LESS に指示してい(less)ます。したがって、名前空間は、ファイル内の各セレクターの完全なセレクター文字列に単純に追加するbootstrap.css必要があり、目的の結果になるはずです。

于 2013-11-05T19:16:33.407 に答える
1

いいえ、コンパイラにもコードにも問題はありません。「ブートストラップはこのように使用することを意図していません」というだけです。より少ないファイルを名前空間に配置することは賢明な考えですが、いわゆる「親セレクター」または同様のトリックを使用するセレクターを持つライブラリとは互換性がありません (つまり、ネストされたセレクターに&追加される場合)。

(更新) 詳細については、 #2052およびそこから参照されているその他の問題を参照してください。

于 2013-11-05T17:39:36.637 に答える