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中使用循环结构来构建所需的最大列类数：

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

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

1 个答案: