Css Sass：用于嵌套选择器

我在scss中编写了以下位，以针对具有相同类的兄弟姐妹：

    .Foo {
        & ~ .Foo {
            bottom: 2 * $distance-from-bottom + $height;

            & ~ .Foo {
                bottom: 3 * $distance-from-bottom + (2 * $height);

                & ~ .Foo {
                    bottom: 4 * $distance-from-bottom + (3 * $height);

                    & ~ .Foo {
                        bottom: 5 * $distance-from-bottom + (4 * $height);
                    }
                }
            }
        }
    }

---

我想用scss

@for

替换它。但是，我正在努力了解如何使用这些嵌套选择器。有什么想法吗

您可以使用“附加每个循环”：

$height: 100px;
$distance-from-bottom: 50px;
$var: #{"&"};

@for $i from 2 to 6 {

  .Foo {
    #{append($var, #{"~ &"})} {
      bottom: $i * $distance-from-bottom + ($height*($i - 1));
    }
  }

  $var: append($var, #{"~ &"});
}

结果:

.Foo ~ .Foo {
  bottom: 200px;
}

.Foo ~ .Foo ~ .Foo {
  bottom: 350px;
}

.Foo ~ .Foo ~ .Foo ~ .Foo {
  bottom: 500px;
}

.Foo ~ .Foo ~ .Foo ~ .Foo ~ .Foo {
  bottom: 650px;
}

---

这也许是一个过火的解决方案，但像这样的事情呢

$sel: '';
@for $i from 1 through 5 {
    $sel: if($i == 1, ".Foo", selector-nest($sel, "& ~ .Foo")) !global;

    if($i > 1) {
        #{$sel} {
            bottom: $i * $distance-from-bottom + ( ( $i - 1 ) * $height);
        }
    }
}

没有测试，但这可能是第一个线索