你可以在LESS css中做一个javascript for循环吗?
我会推荐给结帐Twitter Bootsrap。他们正在建设他们的网格系统。他们使用递归循环,而不是输入他们需要的每个类。
有趣的部分是在mixins.less文件,在欠目录,下面的“//网格”的评论(线516)。有趣的部分是:
#grid {
.core (@gridColumnWidth, @gridGutterWidth) {
.spanX (@index) when (@index > 0) {
(~"[email protected]{index}") { .span(@index); }
.spanX(@index - 1);
}
.spanX (0) {}
...
.span (@columns) {
width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
}
...
这是这种方式称为grid.less文件中少目录:
#grid > .core(@gridColumnWidth, @gridGutterWidth);
即产生(除其他事项外):
.span12 {
width: 940px;
}
.span11 {
width: 860px;
}
.span10 {
width: 780px;
}
...
在bootstrap.css线170
对于@gridColumnWidth,@gridGutterWidth和变量,其余检查VAR iables.less文件(行184)
一定要安装lessc节点编译器的最新版本。
谢谢。如果有人无法理解这个/需要更详细的解释:http://blog.thehippo.de/2012/04/programming/do-a-loop-with-less-css/ – TheHippo
我只是看Bootstrap中的这个昨天晚上,它吹了我的脑海,然后我不得不在我自己的网格库中实现它。好棒! – kalisjoshua
很高兴你觉得它有用@kalisjoshua!振作起来总是欢迎:) – AlessMascherpa
没有什么关于the docs循环的,但因为你可以通过反引号访问JavaScript表达式,你总是可以在你的脚本(而不是更少的代码定义一个函数,但JavaScript的 —例如,如果在浏览器中,你会有一个单独的script
元素),做你的循环,然后访问它,比如:
@height: `doMyLoop()`
这取决于你想达到与循环什么。如果你想循环输出CSS规则,我怀疑你运气不好。
我正在尝试创建一个在24 col网格中创建的循环。基本上,我希望它循环24次并编写网格类。 .grid_1,.grid_2,...,.grid_24 –
这可以通过AlessMascherpa上面小MODS给出的例子中进行,虽然输出降压(10,9,8 ...)对向上(1, 2,3 ...),它只是一个风格的东西。 – augurone
这是一个黑客,但... 添加到您的少的文件。
@testColor: green;
unusedclass {
unknownprop: ~`loopCss(10,".group{{i}} { background-color: @{testColor}; }")`
}
用下面的函数创建一个JavaScript文件loopCss.js:
function loopCss(count,cssTemplate) {
// end the existing unused class
var result = "0;}\n";
// Add your custom css
for(var i=0; i<count; i++) result += cssTemplate.replace("{{i}}",i) +"\n";
// Handle the close bracket from unused class
result += "unusedclass {";
return result;
}
现在包括loopCss.js您less.js之前,它应该工作。
LESS只是一个CSS预编译器。最终结果是纯CSS。我没有看到Javascript进入它的位置? –
@Pekka:LESS可以通过Node.js([more here](http://lesscss.org/))在浏览器和服务器端动态执行。其部分语法确实是评估一个JavaScript表达式,例如(客户端):'@height:\'document.body.clientHeight \';' –
@ T.J。啊,你知道什么!有趣的,谢谢。 –