4

span3HTML のすべての要素にクラスを配置することを避けるために、ミックスインにクラスを追加することは可能ですか? 何かのようなもの：

.myclass {
    .span3;
    // other rules...
}

編集

重要な詳細を指定するのを忘れたことをお詫びします: span3Bootstrap の標準クラスです。Bootstrap フレームワークのどのファイルにもその定義が見つかりませんでした。

4

3 に答える 3

11

新しい回答 (LESS 1.4.0 が必要)

あなたが実際に望んでいるのは、LESS および SASS の用語で拡張として知られているものです。たとえば、HTML要素が必要です（単なる例です）...

<div class="myclass"></div>

...ブートストラップのクラスが追加されているかのように完全に動作しますが、span3実際にそのクラスを HTML に追加する必要はありません。これは を使用して LESS 1.4.0 で実行できますが:extend()、主にブートストラップの動的クラス生成が によって取得されないため、まだ簡単ではありません:extend()。

ここに例があります。この最初の LESS コードを想定します (ブートストラップのように動的に生成されたクラスではありません) 。.span3

.span3 {
  width: 150px;
}

.someClass .span3 {
  font-size: 12px;
}

.someOtherClass.span3 {
  background: blue;
}

この LESS コードを 1.4.0 に追加します。

.myclass {
  &:extend(.span3);
}

この CSS を生成するもの:

.span3,
.myclass {
  width: 150px;
}
.someClass .span3 {
  font-size: 12px;
}
.someOtherClass.span3 {
  background: blue;
}

の他のインスタンスを自動的に拡張しなかったことに注意して.span3ください。これはSASSとは異なりますが、拡張する際にもう少し明示的にする必要があることを意味するだけです。これには、過度の CSS コードの肥大化を回避できるという利点があります。

完全に拡張するには、allキーワードを追加するだけですextend()(オプションを知らなかったので、これは元のコードから更新されていallます)。

.myclass {
  &:extend(.span3 all);
}

これが生成されます：

.span3,
.myclass {
  width: 150px;
}
.someClass .span3,
.someClass .myclass {
  font-size: 12px;
}
.someOtherClass.span3,
.someOtherClass.myclass {
  background: blue;
}

これにより、（私の例では）クラスと.myclass 完全に同等になります。.span3ただし、これがあなたの場合に意味することは、ブートストラップの動的クラス生成を非動的に再定義する必要があるということです。このようなもの：

.span3 {
  .span(3);
}

これは、:extend(.span3)拡張するハードコードされたクラスを見つけるためです。これは、動的に使用.span@{index}して.span3.

元の回答

この回答は、動的に生成されたクラスからプロパティをミックスすることを希望していることを前提としています(これが私があなたの問題だと思っていたものです)。

さて、あなたの問題を発見したと思います。まず、ブートストラップは.spanX一連のクラスをmixins.lessfileで定義するため、ブートストラップ ロードにそれを含めていることを確認する必要があります。ただし、それらが既に含まれていることは当然だと思います。

主な問題

主な問題は、ループ内の動的クラス名を介して、ブートストラップが現在それらを生成する方法です。これは.spanXシリーズを定義するループです:

.spanX (@index) when (@index > 0) {
      .span@{index} { .span(@index); }
      .spanX(@index - 1);
 }
.spanX (0) {}

現在、クラス名自体が動的に生成されているため、mixin 名として使用することはできません。これがバグなのか、単に LESS の制限なのかはわかりませんが、この記事を書いている時点では、動的に生成されたクラス名は mixin 名として機能しないことはわかっています。したがって、.span3HTML にクラスとして配置する CSS コードに含まれる場合がありますが、ミックスインの目的で直接アクセスすることはできません。

修正

ただし、コードがどのように構造化されているかにより、必要なものを取得できます。これは、上記のループ コードでわかるように、真の mixin 自体を使用して.spanXクラスのコードを定義するためです。したがって、これを行うことができるはずです：

.myclass {
    .span(3);
    // other rules...
}

コードは、.span(3)ループがクラスにデータを入力するために使用しているもの.span3であるため、クラスに対して呼び出すと、同じコードが得られます.span3。具体的には、ブートストラップにはmixins.less、その mixin でこれが定義されています。

.span (@columns) {
  width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1));
  *width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%);
}

したがって、 のwidthプロパティを取得.span3します.myclass。

于 2013-03-22T14:47:56.103 に答える
1

これは Less.js で簡単に実現できますが、本当の問題は、「構造グリッド クラスと非構造クラスを混在させるべきか?」ということです。

答えはノーです。

これは悪い考えです。グリッド システムの利点は、構造的なスタイリングと他のスタイリングとの間の懸念事項を分離できることです。私は「絶対に、絶対に、絶対にやってはいけない」と言っているのではありません。しかし、一般的にはそうすべきではありません。私はこれを見るのさえ好きではありません：

<div class="span3 sidebar">
  <ul class="nav">
    ...
  </ul>
</div>

クラスとspan3同じ場所。これに関する問題は、サイドバーがグリッドの列内で「浮かんでいる」だけでなく、グリッドの一部になっていることです.この種のスタイリングを強制的にレスポンシブにするために作成する必要があります。div.sidebar

于 2013-05-15T01:22:41.670 に答える
0

あなたはそれを行うことができますが、.somethign最初に定義する必要があります。この例では、それfont-wight: bold;を行いfont-size 20pxます. 2 番目のクラス .body でわかるように、定義する必要はなく、追加しただけfont-weight: bold;です。font-size: 20px;.something

.something {
    font-weight: bold;
    font-size: 20px;
}
.body {
    background-color: gray;
    border: ridge 2px black;
    .something
}

ここで例を見ることができます。http://jsfiddle.net/7GMZd/

あなたはこの方法でそれを行うことはできません

.body {
    background-color: gray;
    border: ridge 2px black;
    .something {
         font-weight: bold;
         font-size: 20px;
    }
}
于 2013-03-21T18:01:28.270 に答える