How to generate classes in LESS?

Question

I need to generate all combinations the following classes:

.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;
}
.
.
.

I need to use class names as border style likes, is it possible to make it in LESS automatically?

Answer 1

(Update: I've been asked to rework my example to a complete snippet - so here we go).

Variant 1

Basically it's the same as in Martin Turjak answer but without inline javascript and with some further makeup:

// 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));
    }.-;
}

Variant 2

The magic one, no loops, minified CSS output:

// 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

You could also just loop through binary numbers instead of a nested loop (makes everything a bit shorter) ... something like this perhaps:

.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();

In addition you can again add a check for which properties are set/same and combine them under a combined border property and set the border width/style/color like ScottS shows in his example.

Answer 3

Doable

This code allows flexibility in setting style and color to the border, the unit value of the width, and defaults to max width of 1 unit (which is px by default). Note that setting the border width values to anything more than 1, the output CSS code is going to begin increasing at a dramatic rate (try running them at just 2, i.e. calling .generateBorderClasses(@t: 2, @r: 2, @b: 2, @l: 2);, and see the results);

.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();

Still Not Recommended

Personally, I would just have four classes controlling the html (so something like class="bt br bb bl") and then do this:

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

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

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

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

MUCH less (pun intended) css code and essentially the same control value in the class assigning of the html.