S CSS амперсанд и несколько родительских селекторов

Question

Я только что преобразовал весь стиль моего текущего проекта из Less в S CSS, и у меня есть сложный селектор S CSS, состоящий из нескольких селекторов, разделенных запятыми, который теперь скомпилирован совершенно по-другому.

У меня есть фоновые классы для моих разделов, и я хочу удалить верхнее заполнение раздела тем же классом 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, и c.), который теперь применяется к каждому разделу вместо только на повторяющихся фоновых участках и создании бесконечного селектора css (15798 символов, святая корова).

Я знаю, что родительский селектор Меньше амперсанда не интерпретируется так же, как S CSS, но мне нужно знаю, как я мог бы достичь результата в Меньше.

Answer 1

Мне удалось найти простое решение этой проблемы.

В S CSS есть @each l oop. Наличие всех имен цветовых переменных в одной переменной списка для @each l oop дало те же результаты, что и Less по умолчанию. Вот как сейчас выглядит S CSS:

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

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