带有 Less 的循环无法正确编译答案

【问题标题】：Loop with Less does not compile right带有 Less 的循环无法正确编译
【发布时间】：2014-05-13 22:33:54
【问题描述】：

我想用更少的东西创建一个动态图像轮播。这是我的代码：

@sides: 9;
.loop(@sides);

.loop (@index) when (@index > 0) {
    #carousel figure:nth-child(@{index}){
        transform: rotateY((360/@sides*@index));
     }

     .loop((@index - 1));
}

我在这个editor 中调试了它。你可以在那里看到输出。

如果我在我的项目中使用该工作代码，该代码使用通过 Javascript 包含的基于客户端的 LESS，则它不起作用：

Syntax Error on line 36
http://placeholder.com/css/style.less on line 36, column 21:

.loop (@index) when (@index > 0) {

    #carousel figure:nth-child(@{index}){

我真的需要在服务器上安装 Less 还是我的语法错误？

问候雷内

** 更新**

我更新到 v1.7 后，Firebug 显示以下编译后的 css：

 #carousel figure:nth-child(7) {
 }

转换仍然丢失......如果我写

 #carousel figure:nth-child(@{index}){
     background:blue;
   }

任何东西都可以正确编译..我越来越近了，但问题仍未解决:)

... ...

** 更新 2 **

 .loop(@sides);

 .loop (@index) when (@index > 0) {
   #carousel figure:nth-child(@{index}){
   @rotation = 360/@sides*@index;
     -webkit-transform: rotateY((@rotation)+deg);
     -moz-transform: rotateY((@rotation)+deg);
     -o-transform: rotateY((@rotation)+deg);
     transform: rotateY((@rotation)+deg);
   }
   .loop((@index - 1));
 }

在发现 deg 单位丢失后，编辑器给出正确的输出：click here。

但是我的 html 文件给了我一个我不太明白的 parseError：

 ParseError: Unrecognised input

 in style.less on line 37, column 7:

 .loop (@index) when (@index > 0) {

  figure:nth-child(@{index}){

【问题讨论】：

你知道你使用的是哪个版本的客户端JS编译器吗？您正在使用的某些 LESS 代码将无法在旧版本的 LESS 中运行
v1.1.6 ...我将尝试 1.7 -- 谢谢 :)
转换线后是否缺少分号？
我把它忘记在链接里了 - 谢谢！ - 更正但没有效果：/
您的代码是有效的 Less 并且可以使用 Less 1.7.0 按预期编译。它不起作用只是因为您缺少 rotateY 值的 unit，例如transform: rotateY(200) 不是有效的 CSS - 应该是 transform: rotateY(200deg)... 因此你需要 transform: rotateY((360deg/@sides*@index)) 代替。（实际上，您可以在浏览器控制台中看到有关此问题的警告）。

标签： css syntax while-loop less

【解决方案1】：

LESS 要求数学运算符之间有空格，以减少歧义。

transform: rotateY( (360 / @sides * @index ) );

应该可以的。

【讨论】：

"LESS 需要数学运算符之间的空格，" - 不，它不需要。