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

您也可以循环遍历二进制数而不是嵌套循环（使所有内容更短）......或许这样的事情：

.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 2

（更新：我被要求将我的示例重新编写为一个完整的片段 - 所以我们继续）。

变式1

基本上它和Martin Turjak answer中的相同，但是没有内联的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

神奇的一个，没有循环，缩小了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 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（类似于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的类中基本上具有相同的控制值。

如何在LESS中生成类？

3 个答案:

变式1

变式2

可行

仍未推荐