使用Less在循环中为不透明度添加一个变量

Question

我在Less中有一个包含opacity的循环。我希望opacity根据循环数变量进行更改，但我一直得到一个错误"无法识别的输入"。

像这样…

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

我也试过了…

opacity: 0.@i;

，我试着在不同的地方添加引号。

任何想法?

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

---

严格不要这样做:(说明仅供理解)

来到有问题的代码，你试图将变量的值附加到字符串(0.)，为此你需要将整个东西括在引号内，如下面的代码片段。只有在遵循此语法时才会发生字符串连接。另外需要注意的一点是，打印的输出值不应该有引号字符，因此应该使用~或e()来去掉引号。

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