SCSS安培和多父选择器

Question

我刚刚将我当前项目的所有样式从Less转换为SCSS，我有一个复杂的SCSS选择器，由多个选择器组成，用逗号隔开，现在的编译方式完全不同。

我的部分有背景类，我想去掉一个部分的顶部padding，其bg类与前一个部分相同。

.bg{
    &--1, &--2, &--3, &--4,
    &--5, &--6, &--purple,
    &--pink, &--cyan{
        &.section + &.section{
            & > .padd{
                padding-top: 0;
            }
        }
    }
}

我已经没有Less输出了，但在 &.section + &.section 本应只代表父选择器中的一个(如 .bg--1.section + .bg--1.section)，但它现在代表了每一种可能的情况(例如. .bg--1.section + .bg--1.section, .bg--1.section + .bg--2.section等），现在适用于每个部分，而不是只适用于重复的背景部分，并创建了一个无尽的css选择器（15,798个字符，我的天）。

我知道Less的父选择器与SCSS的解释方式不同，但我需要知道如何才能达到Less中的效果。

Answer 1

我已经设法找到了一个简单的方法来解决这个问题。

有一个 @each 循环。将所有颜色变量的名字都放在一个单独的列表变量中进行@each循环，得到的结果和Less通常默认情况下的结果完全一样，这就是SCSS现在的样子。

$colors: 1, 2, 3, 4, 5, 6, purple, pink, cyan;

@each $color in $colors {
    &--#{$color}{
        &.section + &.section{
            & > .padd{
                padding-top: 0;
            }
        }
    }
}