SCSS & 符号和多个父选择器

Question

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

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

.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

我已经设法找到解决此问题的简单方法。

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

SCSS & 符号和多个父选择器

SCSS ampersand and multiple parent selectors

css

sass

less