第二组@media 中的 SCSS @extend 不起作用

Question

下面的代码显示 "You may not @extend an outer selector from within @media" 错误。没有第二组媒体查询（最小宽度：1025px）它工作正常并编译预期结果。

// Input (SCSS)
// ---------------------------------------------------------------------------
@mixin highlight($count) {
    > * {
        @extend %notification;
        width: 45px;
    }
}
@media only screen and (min-width: 1025px) {
    %notification {
        width: auto;
        float: none;
    }
    .help {
        @include highlight(2);
    }
    .push {
        @include highlight(2);
    }
    .pull {
        @include highlight(2);
    }
}
@media only screen and (min-width: 769px) {
    %notification {
        width: auto;
        float: none;
    }
    .help {
        @include highlight(2);
    }
    .push {
        @include highlight(2);
    }
    .pull {
        @include highlight(2);
    }
}


// Expected Output(CSS)
// ---------------------------------------------------------------------------
@media only screen and (min-width: 1025px) {
    .help > *,
    .push > *,
    .pull > * {
        width: auto;
        float: none;
    }
    .help > * {
        width: 45px;
    }
    .push > * {
        width: 45px;
    }
    .pull > * {
        width: 45px;
    }
}
@media only screen and (min-width: 769px) {
    .help > *,
    .push > *,
    .pull > * {
        width: auto;
        float: none;
    }
    .help > * {
        width: 45px;
    }
    .push > * {
        width: 45px;
    }
    .pull > * {
        width: 45px;
    }
}

Answer 1

如果按照规则SASS是不可能的。你不能在多个@media中使用一个@EXTEND，但你可以在一个@media中使用一个@extend。

// Input (SCSS)
// ---------------------------------------------------------------------------
@mixin highlight($count, $placeHolder : notification ) {
    > * {
        @extend %#{$placeHolder}!optional;
        width: 45px;
    }
}

@media only screen and (min-width: 1025px) {
    %notification {
        width: auto;
        float: none;
    }
    .help {
        @include highlight(2);
    }
    .push {
        @include highlight(2);
    }
    .pull {
        @include highlight(2);
    }
}


@media only screen and (min-width: 769px) {
    %notification2 {
        width: auto;
        float: none;
    }
    .help {
        @include highlight(2,notification2);
    }
    .push {
        @include highlight(2,notification2);
    }
    .pull {
        @include highlight(2,notification2);
    }
}

我在 http://sassmeister.com/

上测试了这个

第二组@media 中的 SCSS @extend 不起作用

SCSS @extend inside second set of @media not working

media

sass

extend