Question

最近我最终得到了以下SCSS代码：

.modal {
    ....

    button,
    .button {
        ....
    }

    input + button,
    input + .button {
        ....
    }
}

首先，我想到的是简化：

.modal {
    ....

    button,
    .button {
        ....

        input + & {
        ....
    }
}

不幸的是，我有以下输出：

input + .modal. button,
input + .modal .button {
   ....
}

而非期望的

.modal input + button,
.modal input + .button {
   ....
}

我在问第一个清单中复杂的选择器是否可以简化。

Answer 1

Sass 3.3提供了一种方法，但治愈方法比疾病更糟糕：

.modal {
    color: red;

    @at-root .button, button {
        color: blue;

        input + & {
            .modal & {
                color: green;
            }
        }
    }
}

您还可以使用extend（在我看来更清洁一点）获得您想要的结果：

.modal {
    color: red;

    .button, button {
        @extend %button;
    }
}

%button {
    color: blue;

    input + & {
        color: green;
    }
}

SCSS：缺乏更强大的嵌套

1 个答案: