css - LESSでクラスを生成するには?

Question

次のクラスのすべての組み合わせを生成する必要があります。

.b-1-1-1-1 {
  border:1px solid #000;
}
.b-0-1-1-1 {
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
  border-left: 1px solid #000;
}
.
.
.

ボーダースタイルが好きなようにクラス名を使いたいのですが、LESSで自動で作ることはできますか？

Answer 1

(更新: 例を完全なスニペットに作り直すように依頼されたので、ここで説明します)。

バリアント 1

基本的にはMartin Turjakの回答と同じですが、インラインjavascriptがなく、さらに構成されています:

// usage:

.borders(1px dashed wheat);

div {
    .borders(3px, dotted, red);
}

// implementation:

.borders(@values...) {

    .values(t, 1) {border-top:    @values}
    .values(r, 1) {border-right:  @values}
    .values(b, 1) {border-bottom: @values}
    .values(l, 1) {border-left:   @values}
    .values(... ) {}

    .trbl-(@t, @r, @b, @l) {
        .b-@{t}-@{r}-@{b}-@{l} {
            .values(t, @t);
            .values(r, @r);
            .values(b, @b);
            .values(l, @l);
        }
    }

    .-(@i: 15) when (@i > 0) {
        .-((@i - 1));
        .trbl-(mod(floor((@i / 8)), 2),
               mod(floor((@i / 4)), 2),
               mod(floor((@i / 2)), 2),
               mod(floor((@i / 1)), 2));
    }.-;
}

バリアント 2

魔法の 1 つ、ループなし、縮小された CSS 出力:

// usage:

.borders(1px, dashed, wheat);

// implementation:

.borders(@values...) {
    0, 1 {
        .b-1-&-&-& {border-top:    @values}
        .b-&-1-&-& {border-right:  @values}
        .b-&-&-1-& {border-bottom: @values}
        .b-&-&-&-1 {border-left:   @values}
    }
}

Answer 2

ネストされたループの代わりに 2 進数をループすることもできます (すべてが少し短くなります) ... おそらく次のようなものです:

.set-top() when (@t > 0) {
  border-top: 1px solid #000;
}
.set-left() when (@l > 0) {
  border-left: 1px solid #000;
}
.set-right() when (@r > 0) {
  border-right: 1px solid #000;
}
.set-bottom() when (@b > 0) {
  border-bottom: 1px solid #000;
}

.borders(@t:0, @r:0, @b:0, @l:1){
  .b-@{t}-@{r}-@{b}-@{l} {
    .set-top;
    .set-right;
    .set-bottom;
    .set-left;
  }
}

.loop(@i:16) when (@i < 32) {
  .borders(~`(@{i}).toString(2)[1]`,
     ~`(@{i}).toString(2)[2]`, 
     ~`(@{i}).toString(2)[3]`,
     ~`(@{i}).toString(2)[4]`);
  .loop((@i + 1));
}

.loop();

さらに、どのプロパティが設定されているか/同じであるかのチェックを再度追加し、それらを組み合わせたborderプロパティの下で組み合わせて、ScottS が例で示しているように境界線の幅/スタイル/色を設定できます。

Answer 3

実行可能

このコードにより、境界線のスタイルと色、幅の単位値、およびデフォルトで1単位の最大幅 (pxデフォルト) に柔軟に設定できます。境界線の幅の値を より大きい値に設定すると1、出力 CSS コードが劇的な速度で増加し始めることに注意してください (単に2で実行してみてください。つまり、 を呼び出し.generateBorderClasses(@t: 2, @r: 2, @b: 2, @l: 2);て、結果を確認してください)。

.generateBorderClasses(@unit: px, @style: solid, @color: #000, @t: 1, @r: 1, @b: 1, @l: 1) {

.b() when (@check) {
    border: unit(@t,@unit) @style @color;
}

.b() when (@sum = 0) {}

.b() when (@t > 0) and (@sum > 0) and not (@check) {
    border-top: unit(@t, @unit) @style @color;    
}
.b() when (@r > 0) and (@sum > 0) and not (@check) {
    border-right: unit(@r, @unit) @style @color;    
}
.b() when (@b > 0) and (@sum > 0) and not (@check) {
    border-bottom: unit(@b, @unit) @style @color;    
}
.b() when (@l > 0) and (@sum > 0) and not (@check) {
    border-left: unit(@l, @unit) @style @color;    
}

.t-loop (@t) when (@t > -1) {
  .r-loop (@r) when (@r > -1) {
    .b-loop (@b) when (@b > -1) {
      .l-loop (@l) when (@l > -1) {
         @sum: (@t + @r + @b + @l);
         @check: e(`(@{t} == @{r}) && (@{t} == @{b}) && (@{t} == @{l}) ? "true" : "false"`);

        .b-@{t}-@{r}-@{b}-@{l} {
          .b(); 
        }
        .l-loop(@l - 1);
       }
      .l-loop (-1) {} 
      .l-loop(@l);  
      .b-loop(@b - 1);
    }
    .b-loop (-1) {}
    .b-loop(@b);
    .r-loop(@r - 1);
  }
  .r-loop (-1) {}
  .r-loop(@r);  
  .t-loop(@t - 1);
}
.t-loop(-1) {}

.t-loop(@t);

}
.generateBorderClasses();

まだ推奨されていません

個人的には、html を制御する 4 つのクラス (のようなものclass="bt br bb bl") を用意してから、次のようにします。

.bt {
  border-top: 1px solid #000;
}

.br {
  border-right: 1px solid #000;
}

.bb {
  border-bottom: 1px solid #000;
}

.bl {
  border-left: 1px solid #000;
}

はるかに少ない（しゃれを意図した）cssコードと、htmlのクラス割り当てで本質的に同じ制御値。