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

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

这使我能够做这样的事情

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

我没有研究过less.js ，但是在某种程度上可以做到以下几点：

 //html 
 9 column wide 

有没有办法实现这个目标？

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中使用很像你注意到的

 
 5 column wide