SCSS @extend inside second set of @media not working

Question

The Below code shows "You may not @extend an outer selector from within @media" error. without the second set media query(min-width: 1025px) it works fine & compile expected result.

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

[Check this link](http://www.sitepoint.com/sass-extend-nobody-told-you/) and scroll to `Extending and media queries` — anpsmn, Jan 05 '15 at 06:33

score 0 · Accepted Answer · answered Jan 05 '15 at 10:18

If you follow the rules of SASS is impossible. You can't use one @EXTEND in many @media, but you can use one @extend in one @media.

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

I tested this on http://sassmeister.com/

How to add one more @extend to that Mixin??? – Prajith SN Jan 06 '15 at 09:36 — Prajith SN, Jan 06 '15 at 09:36

SCSS @extend inside second set of @media not working

1 Answers1