0

使い始めたばかりLESSで気に入っています。現在、LESS セマンティクスを使用してグリッドを作成するgrid.lessを調べています。

これにより、このようなことができます

//css
.mydiv { .column(9); }

//html
<div class="mydiv"> 9 column wide</div>

私は勉強less.jsしていませんが、どういうわけか次のことを行うことは可能ですか:

//html
<div class="column(9)"> 9 column wide</div>

これを達成する方法はありますか？

4

1 に答える 1

2

LESS はプリプロセッサであるため (HTML に何かが表示される前に CSS を処理します)、LESS は HTML からパラメータを簡単に読み取ることができません。ただし、本質的に同じことを行うクラスを事前に作成することはできます。何かの幅の列数に実用的な制限を設定する必要があるだけです。ここでの私の例は控えめ (最大 5 列) ですが、変数パラメーターで簡単に変更できます。LESS のループ構造を使用して、必要な最大数の列クラスを構築します。

以下

@numColClasses: 5;

.buildColumnClasses(@colNum) when (@colNum =< @numColClasses) {
  .column@{colNum} {
      .column(@colNum);
  }
  .buildColumnClasses((@colNum + 1));
}
//end loop
.buildColumnClasses(@colNum) when (@colNum > @numColClasses) {}

//start loop
.buildColumnClasses(1);

(疑似) CSS 出力

.column1 {
  code-for-columns-at: 1 wide;
}
.column2 {
  code-for-columns-at: 2 wide;
}
.column3 {
  code-for-columns-at: 3 wide;
}
.column4 {
  code-for-columns-at: 4 wide;
}
.column5 {
  code-for-columns-at: 5 wide;
}

あなたが気づいていたのと同じようにHTMLで使用してください

<div class="column5"> 5 column wide</div>
于 2013-06-14T13:22:32.710 に答える