less.js从HTML中读取类名和参数吗? [英] Can less.js read class names and parameters from HTML?
问题描述
我刚开始使用 LESS
,我喜欢它。我现在正在调查 grid.less ,它使用LESS语义创建网格。
这使我可以这样做
// css
.mydiv {.column 9); }
// html
< div class =mydiv> 9列宽< / div>
我没有研究过 less.js
,但有可能做到以下几点:
// html
< div class = 9)> 9列宽< / div>有没有办法实现这一点?
<因为LESS是一个预处理器(它在HTML中呈现任何内容之前处理CSS),所以LESS无法轻松地从HTML中读取参数。但是,您可以预构建基本上执行相同操作的类。你只需要设置一个实际的限制,多少列宽可能是。我的示例是中等(最多5列),但容易改变与可变参数。它使用LESS中的循环结构建立所需的最大列类数:
@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中读取类名和参数吗?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文