css - 如何将字符串传递给mixin并生成动态变量以在LESSCSS中输出颜色？

  //call the mixin
  .mixin-loop(grey, 7);

  //the implementation
  .mixin-loop(@str, @count) {
    .loop (@i) when (@i > 0) {

      .@{str}-@{i} {
        div { background: "@{@{str}-@{i}}"; }
      }
      .loop(@i - 1);
    }
    .loop (@count);
  }

//globals.less
@grey-1: #ccc;
@grey-2: #999;

我想要的输出是这样的：

//output
.grey-1 div {
  background: #ccc;
}

.grey-2 div {
  background: #999;
}

但是我得到的是：

.#808080-1 div {
  background: "@{#808080-1}";
}
.#808080-2 div {
  background: "@{#808080-2}";
}

最佳答案

您可以使用变量插值（~）来帮助解决此问题：

http://lesscss.org/features/#variables-feature-variable-interpolation

这将防止grey转换为十六进制值，然后允许"@{@{str}-@{i}}"显示为十六进制值而不是字符串。

  //call the mixin
  .mixin-loop(~"grey", 2);

  //the implementation
  .mixin-loop(@str, @count) {
    .loop (@i) when (@i > 0) {

        .@{str}-@{i} {
            div { background: ~"@{@{str}-@{i}}"; }
      }
      .loop(@i - 1);
    }
    .loop (@count);
  }

//globals.less
@grey-1: #ccc;
@grey-2: #999;

关于css - 如何将字符串传递给mixin并生成动态变量以在LESSCSS中输出颜色？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27852315/