SCSS & 和多个父选择器

Question

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

我的部分有背景课程，我想删除与前一个部分具有相同 bg class 的部分的顶部填充。

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

我没有 Less output 了，但是&.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

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

SCSS 中有一个@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;
            }
        }
    }
}