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

您也可以只循环通过二进制数而不是嵌套循环（使所有内容都更短）......可能是这样的：

.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的答案相同，但没有内联 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的类分配中基本相同的控制值。