For 循环在生成的 CSS 变量上添加 space

Question

少这个；

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

.init-spacing(@i) when (@i > 0) {
  
  @size: extract(@sizes, @i);
  
  // MARGINS --------------------------------------------
  .margin-@{size} { margin: var(--spacing-@size); }
  
  // PADDING --------------------------------------------
  .padding-@{size} { padding: var(--spacing-@size); }
  
  .init-spacing(@i - 1);
}

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

生成此输出；

.margin-xxlarge {
  margin: var(--spacing- xxlarge); <-- Notice the added space.
}
.padding-xxlarge {
  padding: var(--spacing- xxlarge); <-- Notice the added space.
}
....

我很好奇为什么 css class 名称没有添加 space 但它们在正在生成的 css 变量中的用法确实添加了space。最重要的是，我如何摆脱添加的 space 以便正确生成 css 变量有效？

这里有一个 Codepen to tinker with 显示编译后的问题 css。

Answer 1

space 通过 @size 与 --spacing-@size 的串联添加，因为 less 总是在变量之间添加一个 space，例如 [=13 的结果=] 是 xsmall xsmall.

要删除不需要的 space，请使用 ~"--spacing-@{size}":

// MARGINS --------------------------------------------
.margin-@{size} { margin: var(~"--spacing-@{size}"); }
  
// PADDING --------------------------------------------
.padding-@{size} { padding: var(~"--spacing-@{size}"); }

相关问题：https://github.com/less/less.js/issues/1375

For 循环在生成的 CSS 变量上添加 space

For loop is adding a space on generated CSS vars

css

less