How to Extend Selectors in Sass Media Queries?

Extending Selectors in Media Queries with Sass

Question:

One desires to embed .item within .item.compact when the screen contracts, but Sass throws an error when attempting to extend using @media. How can one achieve this without reproducing styles?

Answer:

Unfortunately, Sass prohibits extending outer selectors from within media queries. The restriction necessitates alternative approaches:

1. Using a Mixin:

Define a reusable mixin that encapsulates the desired styles. Both within and outside of media queries, extend this mixin:

@mixin compact {
    // Styles for compact items
}

%compact {
    @include compact;
}

// Usage
.item {
    @extend %compact;
}

@media (max-width: 600px) {
    .item {
        @include compact;
    }
}

2. Nesting Extenders Within a Media Query:

This approach allows extending selectors defined outside of media queries:

%foo {
  @media (min-width: 20em) {
    color: red;
  }
}

@media (min-width: 30em) {
  %bar {
    background: yellow;
  }
}

// Usage
.foo {
  @extend %foo;
}

.bar {
  @extend %bar;
}

3. Awaiting Sass Update:

Discussions regarding this restriction are ongoing. Implementing a solution might require a change in Sass syntax or functionality.

The above is the detailed content of How to Extend Selectors in Sass Media Queries?. For more information, please follow other related articles on the PHP Chinese website!