Question

我在Less中有一个包含<!DOCTYPE html> <html> <body> <h1><center>Sample program to test Pop up hang</center></h1> <script> alert('test'); </script> </body> </html>的循环。我希望opacity根据循环数变量进行更改，但我不断收到错误“无法识别的输入”。

像这样......

opacity

我也试过了......

div {
    .circles(5);

    .circles(@n, @i: 1) when (@i =< @n) {
        &:nth-of-type(@{i}) {
            opacity: 0.@{i};
        }
        .circles(@n, (@i + 1));
    }
}

我尝试在各个地方添加引号。

有什么想法吗？

Answer 1

对于打印输出数字，最好使用数学运算（如本例中的乘法），而不是使用字符串连接。下面的代码段应该产生您正在寻找的输出：

div {
  .circles(5);
  .circles(@n, @i: 1) when (@i =< @n) {
    &:nth-of-type(@{i}) {
      opacity: 0.1*@i; /* multiplication by 0.1 automatically converts it to number */
    }
    .circles(@n, (@i + 1));
  }
}

严格要求：（解释仅供理解）

来到有问题的代码，您试图将变量的值附加到String（0.），为此您需要将整个内容括在引号中，如下面的代码段所示。只有遵循此语法时才会发生字符串连接。需要注意的另一件事是打印的输出值不应该有引号字符，因此应该使用~或e()来删除引号。

div {
  .circles(5);
  .circles(@n, @i: 1) when (@i =< @n) {
    &:nth-of-type(@{i}) {
      opacity: ~"0.@{i}";
    }
    .circles(@n, (@i + 1));
  }
}

使用Less在循环中向变量添加变量

1 个答案: