42

クラスを含むLESSファイルがありますinputbase(){}。私は多くの入力タイプで使用していますが、すべての入力タイプではありません。コンパイルすると、出力された CSS ファイルに多くのスタイルが繰り返されます。

ブートストラップがグリッドに LESS を使用する方法と、同じアプローチを使用する方法を調べました。基本クラスcolumn 1 etcから継承する場所。column繰り返しますが、これは大量の CSS を生成するようです。

LESS 継承を使用する代わりに、.inputbase .specificClass in everyを使用する必要がありますか?<input />

4

2 に答える 2

92

さまざまなオプション、決まった答えはありません

コードや目標など、さまざまな要素にスタイルを適用する方法に大きく依存します。ここにいくつかの可能性がありますが、それぞれに長所と短所があります。

1. Mixin (現在行っていること)

以下

.inputbase() {
  /* your base code */
}

.someInput {
  .inputbase;
  /*some input special code */
}

.someOtherInput {
  .inputbase;
  /*some other input special code */
}

.andAnotherInput {
  .inputbase;
  /*and another input special code */
}

CSS出力

.someInput {
  /* your base code */

  /*some input special code */  
}
.someOtherInput {
  /* your base code */

  /*some other input special code */    
}
.andAnotherInput {
  /* your base code */

  /*and another input special code */    
}

に 1 行または 2 行以上のコードが.inputbase()あり、それが 2 つ以上のインスタンスに混在している場合、大量の余分なコードが生成されます。これは、あなたが直面している問題です。

2.クラスを拡張する

LESS はmixinsの拡張を許可する準備がほぼ整っているようですが、現在 (LESS 1.5) これにはクラス定義のみが必要なので、次のようになります。

以下

.inputbase {
  /* your base code */
}

.someInput {
  &:extend(.inputbase);
  /*some input special code */
}

.someOtherInput {
  &:extend(.inputbase);
  /*some other input special code */
}

.andAnotherInput {
  &:extend(.inputbase);
  /*and another input special code */
}

CSS出力

.inputbase, /* this is gone once mixin extending allows .inputbase() extension */
.someInput,
.someOtherInput,
.andAnotherInput {
  /* your base code */   
}
.someInput {
  /*some input special code */    
}
.someOtherInput {
  /*some other input special code */   
}
.andAnotherInput {
  /*and another input special code */   
}

利点は、すべての基本コードが繰り返されないことですが、最初に基本コードと一緒にグループ化され、次に個々のコードに対して再び出力されるため、繰り返されるのはセレクターです。コードを 1 つのセレクター定義にグループ化しておきたい場合、これは適していません。それ以外の場合、これは CSS の出力を削減する優れた方法です。

3. 2 つのクラス (提案する追加の HTML マークアップ)

.inputbaseあなたが提案したこの1つのソリューションには、2つのクラスがあります（これは、入力要素に常に適用されるとは限らないと述べたためです）。

LESS と CSS 出力*

.inputbase {
  /* your base code */
}

.someInput {
  /*some input special code */
}

.someOtherInput {
  /*some other input special code */
}

.andAnotherInput {
  /*and another input special code */
}

これは CSS の量が最も少ないですが、2 つのクラスの余分な HTML マークアップが必要になる<input class="inputbase someInput" />などの欠点があります。

4. ベースをオーバーライドする 1 つのクラス

これは上記よりも優れている可能性があります。

LESS と CSS の出力

input {
  /* your base code */
}

.someInput {
  /*some input special code */
  /*override input base code if needed */
}

.someOtherInput {
  /*some other input special code */
  /*no override if not needed */
}

.andAnotherInput {
  /*and another input special code */
  /*no override if not needed */
}

ほとんどの入力に baseinput コードがある場合は、単純にinput要素定義内で基本入力コードを定義してから、特別な css コードで不要なプロパティをオーバーライドするだけです。これにより、単一のクラスを適用するだけで html を減らすことができます<input class="someInput" />。これにより、CSS と HTML の両方が整理されますが、基本コードが何であるかを覚えていて、必要に応じて上書きできるという欠点があります。

概要

何が最善かは、直面する特定の状況に大きく依存します。しかし、おそらく 2 つの追加のオプションが、あなたのケースについて考えるのに役立つでしょう。個人的には2号か4号を選ぶことが多いですが、1号と3号の申請もあります。

于 2013-11-14T14:23:29.907 に答える
0

そもそも使用しているLessのバージョンに依存するようです。https://github.com/twbs/bootstrap/issues/8947をご覧ください。最初に、これはバグとして識別されました。その場合、バグ修正を待つか、コードを変更するかを選択できます。

バグかどうかは後で説明します。括弧の使い方が異なると、異なる結果が得られます。また、クラスと同じ名前のミックスインに関する問題もあります。https ://github.com/less/less.js/issues/1437 も参照してください。

于 2013-11-14T13:19:34.297 に答える