Question

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

@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 ) );

这应该有效。

循环使用Less不能正确编译

1 个答案: