css - Sass:使用 for 嵌套选择器

Question

我在 scss 中编写了以下代码来定位具有相同类的 sibling :

    .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 替换它。但是，我正在努力了解如何拥有这些嵌套选择器。任何想法 ？

Answer 1

您可以使用附加每个循环来实现:

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