3

次のコードを使用して、LESS CSS を使用して列レイアウトを生成しています。

.columnBuilder (@index) when (@index =< @columnCount) {

  .container_@{columnCount} .grid_@{index}  {
    width: unit(((@baseWidth / @columnCount) * @index)-10, px);
  }

  .columnBuilder(@index + 1);
}

出力が得られます：

.container_24 .grid_1 {
  width: 69px;
}
.container_24 .grid_2 {
  width: 148px;
}
.container_24 .grid_3 {
  width: 227px;
}

etc...

次の出力を与える新しい less 関数を作成するにはどうすればよいですか。

.grid_1,
.grid_2,
....,
.grid_N {
  display: inline;
  float: left;
  margin-left: 5px;
  margin-right: 5px;
}

は として定義Nされて@columnCount: 24;いますが、列数は設定されていませんが、任意の数に変更できます。私は、grid_X散らかりを抑えるためにそれを避けたいと思う人のために体を作ることができることを知っています.

4

2 に答える 2

0

結局のところ、LESS はこのようなものをネイティブでサポートしておらず、それぞれが独自の本体を持つ CSS の複数のブロックを常に作成するため、mixin を使用して少しハックする必要があります。私は以下を使用しました：

.columnBuilderX (@index) when (@index = 1) {

  @isel: ~".grid_@{index}, ";

  .columnBuilderX (@index + 1, @isel);
}

.columnBuilderX (@index, @innerSel) when (@index =< (@columnCount - 1)) {

  @isel: @innerSel + ~".grid_@{index}, ";

  .columnBuilderX (@index + 1, @isel);
}

.columnBuilderX (@index, @innerSel) when (@index = @columnCount) {
  @isel: @innerSel + ~".grid_@{index} ";

  @{isel} {
    display: inline;
    float: left;
    margin-left: 5px;
    margin-right: 5px;
  }

  .columnBuilderX (@index + 1, @isel);
}

私のために生産：

.grid_1,  .grid_2,  .grid_3,  .grid_4,  .grid_5,  .grid_6,  .grid_7,  .grid_8,  .grid_9,  .grid_10,  .grid_11,  .grid_12,  .grid_13,  .grid_14,  .grid_15,  .grid_16,  .grid_17,  .grid_18,  .grid_19,  .grid_20,  .grid_21,  .grid_22,  .grid_23,  .grid_24 {
  display: inline;
  float: left;
  margin-left: 5px;
  margin-right: 5px;
}

最初の mixin は呼び出された最初の mixin で、まだ内部セレクターを持っていません。このwhen節では、コンマなしで最後のセレクターを追加し、組み込みのセレクター リストを使用して CSS も適用します。

誰かがこれより簡単なものを思い付くことができれば、答えを作成してください。

于 2013-08-09T20:58:18.610 に答える