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

问题描述

我刚开始使用 LESS ，我喜欢它。我现在正在调查，它使用LESS语义创建网格。

这使我可以这样做

  // css 
 .mydiv {.column 9）; } 
 
 // html 
< div class =mydiv> 9列宽< / div> 
  

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

  // html 
< div class = 9）> 9列宽< / div>有没有办法实现这一点？
 
 
 
  
 
 
   
  @numColClasses：5; 
 
 .buildColumnClasses（@colNum）when（@colNum =< @numColClasses）{
 .column @ {colNum} {
 .column（@colNum）; 
} 
 .buildColumnClasses（（@ colNum + 1））; 
} 
 // end loop 
 .buildColumnClasses（@colNum）when（@colNum> @numColClasses）{} 
 
 //开始循环
 .buildColumnClasses（1）; 
  
 （Pseudo）CSS输出 
  .column1 {
 code-for-columns-at：1 wide; 
} 
 .column2 {
 code-for-columns-at：2 width; 
} 
 .column3 {
 code-for-columns-at：3 wide; 
} 
 .column4 {
 code-for-columns-at：4 wide; 
} 
 .column5 {
 code-for-columns-at：5 wide; 
} 
  
 在HTML中使用非常类似于 / p> 
 
 
 < div class =column5> 5列宽< / div> 
  
 
I've just started using LESS and I love it. I'm now looking into grid.less which creates grids using LESS semantics.
This enables me to do something like this
//css
.mydiv { .column(9); }

//html
<div class="mydiv"> 9 column wide</div>
I've not studied less.js, but is there somehow possible to do the following:
//html
<div class="column(9)"> 9 column wide</div>
Is there any way to achieve this?
 解决方案 
LESS cannot easily read a parameter from the HTML, as LESS is a preprocessor (it processes the CSS before anything is presented in HTML). However, you can prebuild classes that will essentially do the same thing. You just need to set a practical limit to how many columns wide something might be. My example here is modest (5 columns max), but easily changed with the variable parameter. It uses a loop structure in LESS to build up to the maximum number of column classes you desire:
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);
(Pseudo) CSS Output
.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;
}
Use in HTML much like you were noting
<div class="column5"> 5 column wide</div>
                        
这篇关于less.js从HTML中读取类名和参数吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！