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

Question

  //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}";
}

Answer 1

您可以使用变量插值 (~) 来帮助解决这个问题：

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;

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

how to pass a string to a mixin and generate a dynamic variable to output color in LESSCSS?

css

less