css - Loop with Less 编译不正确

Question

我想用 less 创建一个动态图像轮播。这是我的代码:

@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 还是我的语法有误？

问候语雷内

..

..

** 更新**

Firebug 在我更新到 v1.7 后显示以下编译的 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}){

Answer 1

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

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

这应该有效。