使用 Less 在循环中将变量添加到不透明度

Question

我在 Less 中有一个循环，其中包含 opacity。我希望 opacity 根据循环编号变量进行更改，但我一直收到错误 "unrecognised input".

像这样...

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

使用 Less 在循环中将变量添加到不透明度

Adding a variable to opacity in a loop using Less

css

loops

opacity

less