在生成循环中使用更少的变量

Question

我正在尝试使用循环生成相关的 CSS 使用定义的 Less 变量。然而，我正在努力，因为我在使用 scss 多年后慢慢习惯了 Less 并且可以使用另一双眼睛，因为我似乎找不到合适的例子。

假设你有这样的 Less（除了实际上我的 less 变量在一个单独的文件中并在循环之前通过 @import 导入）；

@spacing-xsmall: .25rem; // 4px
@spacing-small: .5rem; // 8px
@spacing-medium: 1rem; // 16px
@spacing-medium-large: 1.5rem; // 24px
@spacing-large: 2rem; // 32px
@spacing-xlarge: 2.5rem; // 40px
@spacing-xxlarge: 4rem; // 64px

@sizes: xsmall, small, medium, medium-large, large, xlarge, xxlarge;

.init-spacing(@i) when (@i > 0) {
  
  @size: extract(@sizes, @i);
  @space: ~"@spacing-@{size}";
  
  .margin-@{size} { margin: @space }

  .padding-@{size} { padding: @space; }
  
  .init-spacing(@i - 1);
}

.init-spacing(length(@sizes));

这会产生这样的输出；

.margin-xxlarge {
  margin: @spacing-xxlarge;
}
.padding-xxlarge {
  padding: @spacing-xxlarge;
}
....

显然在 CSS 输出中我想要变量 VALUE，所以输出会像；

.margin-xxlarge {
  margin: 4rem;
}
.padding-xxlarge {
  padding: 4rem;
}
....

如何使用 Less 完成此操作？我知道字符串插值可能是罪魁祸首，但我有点卡在文档中了。

这里有一个 Codepen to tinker with 问题的可重现示例。

我尝试了 this answer 但输出只是 returns 就像 .class { margin: [object, object] } 以及我发现的其他几个类似的但似乎无法涵盖我循环数组的场景就像我想做的那样，因为我现有的变量可能不仅仅是一个简单的索引号，而且我认为这是我在此处工作的参数混合中不足的部分。我只是在寻找我在这里遗漏的细微差别，以一种相当通用的方式生成预期的结果，这样我就可以将它应用到其他类似的实例中。

Answer 1

为什么不使用 variable variables？

@spacing-xsmall: .25rem; // 4px
@spacing-small: .5rem; // 8px
@spacing-medium: 1rem; // 16px
@spacing-medium-large: 1.5rem; // 24px
@spacing-large: 2rem; // 32px
@spacing-xlarge: 2.5rem; // 40px
@spacing-xxlarge: 4rem; // 64px

@sizes: xsmall, small, medium, medium-large, large, xlarge, xxlarge;

.init-spacing(@i) when (@i > 0) {
  
  @size: extract(@sizes, @i);
  @space: ~"spacing-@{size}";
  
  .margin-@{size} { margin: @@space }

  .padding-@{size} { padding: @@space; }
  
  .init-spacing(@i - 1);
}

.init-spacing(length(@sizes));

我得到了（preview）

.margin-xxlarge {
  margin: 4rem;
}
.padding-xxlarge {
  padding: 4rem;
}
.margin-xlarge {
  margin: 2.5rem;
}
.padding-xlarge {
  padding: 2.5rem;
}
.margin-large {
  margin: 2rem;
}
.padding-large {
  padding: 2rem;
}
.margin-medium-large {
  margin: 1.5rem;
}
.padding-medium-large {
  padding: 1.5rem;
}
.margin-medium {
  margin: 1rem;
}
.padding-medium {
  padding: 1rem;
}
.margin-small {
  margin: 0.5rem;
}
.padding-small {
  padding: 0.5rem;
}
.margin-xsmall {
  margin: 0.25rem;
}
.padding-xsmall {
  padding: 0.25rem;
}

在生成循环中使用更少的变量

Consuming Less Vars in a generating for loop

css

less