css - 还有另一种方法可以用sass写这个吗？

Question

$styles: background #333, margin 20px, padding 10px

.factory
  @each $style in $styles
 #{nth($style, 1)}: nth($style, 2)

有没有另一种方法可以用 sass 来写这意味着同样的事情？谁能解释这段代码到底在做什么？它输出到以下 css:

.factory {
  background: #333333;
  margin: 20px;
  padding: 10px;
}

我不明白这段代码在做什么。

Answer 1

让我们逐行分析:

$styles: background #333, margin 20px, padding 10px

这声明了全局变量 $styles 并为其分配了一个属性值对列表。

.factory

这构建了一个新的类选择器 .factory。

  @each $style in $styles

这是 Sass 中的一个循环，遍历 $styles 列表并将每个列表条目一个一个地分配给变量 $style，因此在第一次迭代中它将具有值 background #333，在下一次迭代中 margin 20px，依此类推。

    #{nth($style, 1)}: nth($style, 2)

此行使用字符串插值 #{...} 和 Sass 列表的 nth 函数来构建 CSS 属性及其关联值。 background #333 是 Sass 中的列表本身(虽然只是空格分隔)并且 nth($style, 1) 给你 background，而nth($style, 2) 在 @each 循环的第一次迭代中为您提供 #333。

这为您提供了预期的输出。您为什么要寻找不同的方法来实现这一目标？