你可以在LESS css中做一个javascript for循环吗？

我正在寻找更少的for循环。是否可以在Less内做到这一点？我知道它有能力评估js，但在这个程度上？你可以在LESS css中做一个javascript for循环吗？

2011-08-29 Steven Walker

LESS只是一个CSS预编译器。最终结果是纯CSS。我没有看到Javascript进入它的位置？ –

@Pekka：LESS可以通过Node.js（[more here]（http://lesscss.org/））在浏览器和服务器端动态执行。其部分语法确实是评估一个JavaScript表达式，例如（客户端）：'@height：\'document.body.clientHeight \';' –

@ T.J。啊，你知道什么！有趣的，谢谢。 –

我会推荐给结帐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节点编译器的最新版本。

来源

2012-03-29 16:06:56 AlessMascherpa

谢谢。如果有人无法理解这个/需要更详细的解释：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规则，我怀疑你运气不好。

来源

2011-08-29 05:26:24

我正在尝试创建一个在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之前，它应该工作。

来源

2012-03-06 22:10:13 matsondawson

你可以在LESS css中做一个javascript for循环吗？

回答

相关问题