Question

在Less中，是否可以访问类名的一部分并在mixin中使用？

最好用一个例子来解释：

我有一个网格，我声明如下：

.columns (@columns) {
    //code here to generate column widths
}

//This is where my problem is:
.column-1 {
    .col (1)
}
.column-2 {
    .col (2)
}
.column-3 {
    .col (3)
}
// etc etc

显然这里有很多重复的代码。理想情况下，我希望能够不必声明column-1 column-2等，并且可能有一些方法，正则表达式，解析类名，并使用破折号后的值来自动计算列宽。我几乎可以肯定twitter bootstrap正在做类似的事情，但我无法理解它：

.spanX (@index) when (@index > 0) {
      (~".span@{index}") { .span(@index); }
      .spanX(@index - 1);
    }
    .spanX (0) {}

Answer 1

我想你会理解：

.columnX (@index) when (@index > 0) {          // Guarded mixin: use this mixin when the condition is true (like an if statement)
    (~".column-@{index}") {                    // outputs .column-0 as a class name
        .col(@index);                          // for the contents, use the col mixin
    }    // which class you are doing

    .columnX(@index - 1);                      // Recursive call to the same mixin, going down by 1
}
.columnX (0) {} // Default implementation so that when .columnX(0) is called, a matching mixin is found.

.col (@index) {
    // actual css that will be applied to column-1 if @index is 1
    width: @index * 10px; // for example
}
.columnX(3);                                   // number of columns you want

修改（错过;的{{1}}）修改添加了更多评论

这一切都应该给出结果：

.columnX(3);

Answer 2

这与@ sherbrow的答案基本相同，但更简洁一点并且没有错误。考虑一下这个长长的解释性评论来支持他的正确答案 - 它只是一个评论而已，而不仅仅是评论！

您将使用这样的LESS loop mixin作为中间帮助程序，然后调用它来指定要生成的类的数量。以下是.column-1，.column-2和.column-3的操作方法。如果您想要最多四列：只需.columns(4)代替.columns(3) [第9行]。要最多五列，只需.columns(5)。

1    // we'll call this if we want to build columns
2    .columns(@i) when (@i > 0) {
3      .column-@{i} {
4        .col(@i)
5      }
6      .columns(@i - 1)
7    }
8    // for example, here we build columns 1-3
9    .columns(3);

将编译为

的结果

.column-1 {.col(1)}
.column-2 {.col(2)}
.column-3 {.col(3)}

（你的问题假设已经有一个mixin .col(@x)，所以我也是假设。请参阅 4 了解如何跳过这一额外步骤。）

以下是发生的事情：

整个第一块[第1-7行]只是坐在那里直到被召唤。
.columns(3) [第9行]将我们发送到.columns(@i) mixin [第2行]，为变量@i指定值3。
由于@i（3）大于0 [第2行]，我们满足guard并允许超过{ [第2行]。
.column-@{i} {...} [第3-5行]就是这个mixin输出的内容。
- @i为3，因此输出为.column-3 {.col(3)}
- 语法@{i}用于将变量的值作为字符串
- 如果您不需要在其他任何地方使用.col(@x)，您也可以直接在此处删除样式，例如（alà@ sherbrow）.column-@{i} {width: @i * 10px}
然后循环：编译第3-5行后，再次调用此mixin，但使用不同的值[第6行]：.columns(@i - 1) ==＆gt; .columns(3 - 1) ==＆gt; .columns(2)。
回到顶部[第2行]：@i，现在为2，大于零，所以我们被允许进入.output .column-2 {.col(2)}（其中.col(2)立即被编译，所以你编译的CSS实际上是.column-2 { the.col(2)styles }）
继续输出和循环，直到@i不大于0（即在.columns(1)之后停止）。

较少的CSS - 访问类名的一部分并在mixin中使用

2 个答案: