loops - 对 SASS 中的变量列表执行计算

Question

是否可以对变量列表执行计算，以生成另一个变量列表。

例如说我想列出我想在我的 CSS 中使用的所有媒体查询......

$mediaQueries:
768,
1024
;

然后像这样将所有这些的价值翻倍......

$newMediaQueries:

@each $mediaQuery in $mediaQueries {
  $mediaQuery * 2
}

;

（我实际上想做的是为这个变量列表生成 em 版本，但我认为我会在这个例子中保持数学简单）。

Answer 1

是的：

$mediaQueries: 768, 1024;

$newMediaQueries: ();

@each $mediaQuery in $mediaQueries {
  $newMediaQueries: append($newMediaQueries, $mediaQuery * 2);
}

诀窍是创建一个空列表，然后遍历旧值并将它们附加到新列表中。

默认情况下，它会输出一个类似的列表1536 2048，但您可以通过传递该选项来使用逗号：$newMediaQueries: append($newMediaQueries, $mediaQuery * 2, comma);