SASS嵌套循环

Question

经与下面的代码有问题,我希望它生成9个班,一个为每个组合一个CSS文件$x和$y.

$grid-width: 3;
$grid-height: 3;
$x: 0;
$y: 0;

@while $x < $grid-width {
  @while $y < $grid-height {

    .x#{$x}y#{$y} {
      top: $width * $x;
      left: $width * $y;
    }

    $y: $y + 1;
  }

  $x: $x + 1;
}

相反,它只生成一次$y值迭代,几乎就像$x设置为1一样.

.x0y0 {
  top: 0px;
  left: 0px; }

.x0y1 {
  top: 0px;
  left: 100px; }

.x0y2 {
  top: 0px;
  left: 200px; }

有任何想法吗？

编辑 我已经设法通过将内部循环移动到mixin来解决问题,而不是包括它,但它感觉很乱,我仍然不明白为什么它会起作用.

Answer 1

我不知道为什么它失败了外环,傻电脑,但这似乎是你的出价:

萨斯:

$width: 100px;
$height: 100px;

$grid-width: 3;
$grid-height: 3;

@for $i from 0 to $grid-width {
  @for $j from 0 to $grid-height {
    .x#{$i}y#{$j} {
      top: $width * $i;
      left: $width * $j;
    }
  }
}

CSS:

.x0y0 {
  top: 0px;
  left: 0px;
}

.x0y1 {
  top: 0px;
  left: 100px;
}

.x0y2 {
  top: 0px;
  left: 200px;
}

.x1y0 {
  top: 100px;
  left: 0px;
}

.x1y1 {
  top: 100px;
  left: 100px;
}

.x1y2 {
  top: 100px;
  left: 200px;
}

.x2y0 {
  top: 200px;
  left: 0px;
}

.x2y1 {
  top: 200px;
  left: 100px;
}

.x2y2 {
  top: 200px;
  left: 200px;
}