@each循环设置多个属性

Question

我正在尝试创建一个@each循环，该循环将为我设置多个属性。 在我的html中，我在行中有四个段落，随着页面的关闭，我想为每个段落调整颜色和字体大小。 显然，我正在做的事情没有用：还有什么我可以尝试的吗？

@each $p in (
  one #fffff6, $bfs + .1em,
  two #fffff6 - 10, $bfs,
  three #fffff6 - 20, $bfs - 0.1em,
  four #fffff6 - 30, $bfs - 0.2em
) {
.#{nth($p, 1)} {
  background: #{nth($p, 2)};
  font-size: #{nth($p, 2)};
  padding: 1em 6em 1em 1em;
  text-align: left;
  border: 2px solid #333;
  border-radius: 5px;
  }
}

Answer 1

问题是您没有创建包含4个项目的列表，而是创建包含8个项目的列表：

$bfs: 1em;
@each $p in (
  one #fffff6 $bfs + .1em,
  two #fffff6 - 10 $bfs,
  three #fffff6 - 20 $bfs - 0.1em,
  four #fffff6 - 30 $bfs - 0.2em
) {
.#{nth($p, 1)} {
  background: #{nth($p, 2)};
  font-size: #{nth($p, 3)};
  padding: 1em 6em 1em 1em;
  text-align: left;
  border: 2px solid #333;
  border-radius: 5px;
  }
}

交替：

$bfs: 1em;
@each $p in (
  one (#fffff6, $bfs + .1em),
  two (#fffff6 - 10, $bfs),
  three (#fffff6 - 20, $bfs - 0.1em),
  four (#fffff6 - 30, $bfs - 0.2em)
) {
.#{nth($p, 1)} {
  background: #{nth(nth($p, 2), 1)};
  font-size: #{nth(nth($p, 2), 2)};
  padding: 1em 6em 1em 1em;
  text-align: left;
  border: 2px solid #333;
  border-radius: 5px;
  }
}