Extending Selectors from Within Media Queries with SASS

Extending selectors from within media queries with Sass

The simple answer is: you can't because Sass can't (or won't) compose the selector for it. You can't be inside of a media query and extend something that's outside of a media query. It certainly would be nice if it would simply take a copy of it instead of trying to compose the selectors. But it doesn't so you can't.

Use a mixin

If you have a case where you're going to be reusing a block of code inside and outside of media queries and still want it to be able to extend it, then write both a mixin and an extend class:

@mixin foo {
    // do stuff
}

%foo {
    @include foo;
}

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

@media (min-width: 30em) {
    .bar {
        @include foo;
    }
}

Extend the selector within a media query from the outside

This won't really help your use case, but it is another option:

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

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

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

.bar {
  @extend %bar;
}

Wait until Sass lifts this restriction (or patch it yourself)

There are a number of ongoing discussions regarding this issue (please don't contribute to these threads unless you have something meaningful to add: the maintainers are already aware that users desire this functionality, it's just a question of how to implement it and what the syntax should be).

• https://github.com/sass/sass/issues/1050
• https://github.com/sass/sass/issues/456

Extending in a media query in Sass and Bootstrap 4

You are right, you can not @extend like this.
But you can @include some @mixin.

There is unfortunately no @mixin to create .btn-link variant by default in Bootstrap 4.

If you wanted some other variant, you could use these @mixins which are part of Bootstrap 4:

@include button-variant($background, $border, $active-background: darken($background, 7.5%), $active-border: darken($border, 10%))

or this

@include button-outline-variant($color, $color-hover: #fff)

(Useful list of Boostrap 4 mixins)

But if you need .btn-link you have to make your own @mixin. Something like this (it's copy/paste style of .btn-link in to new mixin):

//
// Link buttons
//
// Make a button look and behave like a link
@mixin btn-link() {

    font-weight: $font-weight-normal;
    color: $link-color;
    background-color: transparent;

    @include hover {
        color: $link-hover-color;
        text-decoration: $link-hover-decoration;
        background-color: transparent;
        border-color: transparent;
    }

    &:focus,
    &.focus {
        text-decoration: $link-hover-decoration;
        border-color: transparent;
        box-shadow: none;
    }

    &:disabled,
    &.disabled {
        color: $btn-link-disabled-color;
        pointer-events: none;
    }

    // No need for an active state here

} 

And then you can use it as you wish:

//everything over 767px
@media (min-width: 768px) {
    .box {
        .logout-button {
            @include btn-link;
        }
    }
}

Nice article about this: SCSS - Extending Classes Within Media Queries

Sass @extend inside a media query

You may try a @mixin rule instead of @extend.

Do you really have an idea how the generated CSS will look like? @extend is an aggregator for selectors, this may end up in very confusing CSS code.

My suggestion with @extend rules: Avoid @extending regular rules, use %placeholder rules instead.

SASS: @extend inside of @media query

You cannot use @extend inside a media query.
What you can do it the other way around though, use the media query inside the class you are extending.

%dark-theme {
    @media (prefers-color-scheme: dark) {
        background: $dark-background;
    }
}

%light-theme {
    @media (prefers-color-scheme: light) {
        background: $light-background;
    }
}

body {
    @extend %light-theme;
    @extend %dark-theme;
}

mixin is also an alternative

SCSS @extend inside second set of @media not working

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/

SCSS @extend inside media query alternatives to avoid duplicate properties

You can construct a selector variable with the entire selector group.

@mixin even-rows-mixin($columns, $rule) {
   $selector : '';
    @for $i from 1 through $columns {
      $selector:  $selector + $rule + '('+ #{2 * $columns}n  + "+" + #{$i + $columns} + ') ,';
    }  
  #{$selector} {
    @content;
  }
}

li {
    width: 12%;
}
@include even-rows-mixin(8, 'li:nth-child') {
 background-color: pink; 
};

Note: For some reason its not working in codepen editor. But it's working with node-sass

---

Related Topics