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)在第一次迭代中为您提供#333 @each循环。

这可以为您提供已经预期的输出。你为什么要寻找一种不同的方法来实现这个目标？

还有另一种方式来写这个吗？

1 个答案: