jquery - less.js 可以从 HTML 中读取类名和参数吗？

Question

我刚开始使用LESS，我喜欢它。我现在正在研究使用 LESS 语义创建网格的grid.less 。

这使我能够做这样的事情

//css
.mydiv { .column(9); }

//html
<div class="mydiv"> 9 column wide</div>

我没有研究过less.js，但有没有可能做到以下几点：

//html
<div class="column(9)"> 9 column wide</div>

有什么办法可以做到这一点？

Answer 1

LESS 不能轻易地从 HTML 中读取参数，因为 LESS 是一个预处理器（它在 HTML 中呈现任何内容之前处理 CSS）。但是，您可以预构建基本上会做同样事情的类。您只需要设置一个实际的限制，即可能有多少列宽。我在这里的示例是适度的（最多 5 列），但很容易使用变量参数进行更改。它使用 LESS 中的循环结构来构建您想要的最大列类数量：

较少的

@numColClasses: 5;

.buildColumnClasses(@colNum) when (@colNum =< @numColClasses) {
  .column@{colNum} {
      .column(@colNum);
  }
  .buildColumnClasses((@colNum + 1));
}
//end loop
.buildColumnClasses(@colNum) when (@colNum > @numColClasses) {}

//start loop
.buildColumnClasses(1);

（伪）CSS 输出

.column1 {
  code-for-columns-at: 1 wide;
}
.column2 {
  code-for-columns-at: 2 wide;
}
.column3 {
  code-for-columns-at: 3 wide;
}
.column4 {
  code-for-columns-at: 4 wide;
}
.column5 {
  code-for-columns-at: 5 wide;
}

就像您注意到的那样在 HTML 中使用

<div class="column5"> 5 column wide</div>