0

私は次のようなLESSスタイルを作りたいです:

.td-middle50
{
   line-height:50px;
   vertical-align:middle;
}

これを適用して、すべての要素の行の高さを 50px にし、垂直方向に揃えることができます。

50 は変数です。

これは私が持っている限りです：

.td-middle(@vheight){
    line-height:(@vheight);
    vertical-align:middle;
}

しかし、これは: A) うまくいかない B) tr の代わりに各 td に適用する必要がある

4

1 に答える 1

3

Twitter Bootstrap の LESS ファイル ( source.span1 )で.span12クラスが定義されている方法を見てみましょう。これらは、いわゆる「ミックスイン」 (ここでの例を参照) を使用して定義され、実行されます (ここでの例を参照)。

Bootstrap のコードから ( mixins.less):

// The Grid
#grid {
  .core (@gridColumnWidth, @gridGutterWidth) {
    .spanX (@index) when (@index > 0) {
      (~".span@{index}") { .span(@index); }
      .spanX(@index - 1);
    }
    .spanX (0) {}
    /* ... a lot of code here ... */
  }
  /* ... other code ... */
}

ミックスインの使用法 ( 内grid.less):

// Fixed (940px)
#grid > .core(@gridColumnWidth, @gridGutterWidth);

// Fluid (940px)
#grid > .fluid(@fluidGridColumnWidth, @fluidGridGutterWidth);

ミックスインについて詳しく学ぶことから始めるのが良いでしょう: http://lesscss.org/#-mixins

しかし、1 つのアドバイスがあります。前述の「変数」のすべての値に対してこれを機能させたい場合は、停止してください。これは CSS にコンパイルする必要があり、CSS では、(クラスの名前の一部に基づいて、すべてのクラスの一致基準に動的にスタイルを適用するために) 必要なことを行うことができません。考えを再考してください。

于 2012-07-22T00:45:56.490 に答える