Question

我正在尝试使用SASS中的@each循环生成css类名，并且在循环中声明的变量范围方面遇到了困惑。

变量$infix用于在生成的类名前添加唯一的断点名（'sm'，'md'，'lg'...等），前提是$ break-点宽不等于0

问题是，$ infix变量的值（即断点名称）在循环的每个迭代中都是相同的，尽管我希望它在每次迭代中都是唯一的。

SCSS

$config: (
        phone: (
                break-point-width:0px,
                break-point-name: xs
        ),
        tablet: (
                break-point-width:600px,
                break-point-name: sm
        ),
        laptop: (
                break-point-width:900px,
                break-point-name: md
        ),
        desktop: (
                break-point-width:1200px,
                break-point-name:lg
        ),
);

@each $key, $map in $config {
  $break-point-width: map_get($map, break-point-width);
  $break-point-name: map_get($map, break-point-name);
  $infix: if($break-point-width == 0px, null, -$break-point-name);
  @media (min-width: $break-point-width) {
    @for $i from 1 through 2 {
      .foo#{$infix}-#{$i} {
        content: 'bar';
      }
    }
  }
}

已编译的CSS

@media (min-width: 0px) {
  .foo-1 {
    content: 'bar'; }
  .foo-2 {
    content: 'bar'; } }

@media (min-width: 600px) {
  .foo-sm-1 {
    content: 'bar'; }
  .foo-sm-2 {
    content: 'bar'; } }

@media (min-width: 900px) {
  .foo-sm-1 {
    content: 'bar'; }
  .foo-sm-2 {
    content: 'bar'; } }

@media (min-width: 1200px) {
  .foo-sm-1 {
    content: 'bar'; }
  .foo-sm-2 {
    content: 'bar'; } }

从已编译的css输出中可以看到，循环的第一次迭代没有像预期的那样在类名前加上$ infix变量的值。在其余的迭代中，所有类名都以'sm'断点名作为前缀。这令人困惑，因为可以看到$ break-point-width变量的值在每个迭代中都是唯一的，如生成的@media查询所示，但是$ break-point-name变量的值在每个迭代中都是相同的迭代。

我假设$ infix变量（因此它的值）没有作用于循环的每次迭代，并且仅声明了一次。

如果有人能帮助我理解这种现象的原因以及如何解决这个问题，我将非常感激。

非常感谢和赞赏，

SASS每个循环中的变量范围

0 个答案: