Allow @extend across media queries

Edit: The current plan here is to allow @extend across media queries by duplicating the queries the current @extend is in and unifying them with any media queries the extendee is in. For example:

.a {w: x}
@media (min-width: 500px) {
  .b {@extend .a}
  .c {y: z}
}

would produce

.a {w: x}
@media (min-width: 500px) {
  .b {w: x}
}

@media (min-width: 500px) {
  .c {y: z}
}

and

@media screen {
  .a {w: x}
}

@media (min-width: 500px) {
  .b {@extend .a}
  .c {y: z}
}

would produce

@media screen {
  .a {w: x}
}
@media screen and (min-width: 500px) {
  .b {w: x}
}

@media (min-width: 500px) {
  .c {y: z}
}

Original issue follows:

---

As originally brought up in #456, one way to allow extending across media queries would be to have a flag for @extend to explicitly tell Sass that you’re OK with creating a duplicate context in a similar fashion to how the !optional flag currently works.

The syntax as currently proposed would look/work something like the following:

%full {
  width: 100%;
  float: left;
  clear: both;
}

%half {
  width: 50%;
  float: left;
}

.sidebar-1 {
  @extend %full;
  background: blue;
  @media (min-width: 500px) {
    @extend %half !duplicate; // A new extend context will be created here for the all, min-width: 500px media context and extension will work as normal.
    background: red;
  }
}

.sidebar-2 {
  @extend %full;
  background: green;
  @media (min-width: 500px) {
    @extend %half !duplicate; // Because a context for this exact media query already exists, it will extend that one instead of creating a duplicate context
    background: orange;
  }
}

.content {
  @extend %half;
  background: purple;
}

would compile to

.sidebar-1, .sidebar-2 {
  width: 100%;
  float: left;
  clear: both;
}

.content {
  width: 50%;
  float: left;
}

.sidebar-1 {
  background: blue;
}

@media (min-width: 500px) {
  .sidebar-1, .sidebar-2 {
    width: 50%;
    float: left;
  }

  .sidebar-1 {
    background: red;
  }
}

.sidebar-2 {
  background: green;
}

@media (min-width: 500px) {
  .sidebar-2 {
    background: orange;
  }
}

.content {
  background: purple;
}

Of course the optimization around this would be difficult, needing to ensure that the matching only happens for identical @media contexts (but include ones in or chains) and a decision would need to be made as to if the selectors should be moved to the first or last item as the normal @extend pattern of “all” doesn’t quite make sense here, but because it is an explicit call, a user will understand that they’re changing how it works.

[sospedra]

3 years later still not done…

[brandensilva]

Many of us are still waiting on this feature to land. It seems like with all the discussion previously around this it’d have some more weight in its priority.

The fact that you can’t @extend from within a media query feels awkward. Can you generate mixins and workarounds? Sure, but you just expect it to work no matter where you @extend from as long as whatever you are extending is available to the file you are using it in.