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;
  }
}

@each循环设置多个属性

1 个答案: