Code and style selectors:

// ================================================ // SCSS @extends Across Media Queries // More info: https://codepen.io/jakob-e/pen/jKyuq // ================================================ // Simple media mixin - without the overthinking // of breakpoint libraries - sorry guys ;) $_current_breakpoint_key:''; @mixin media($breakpointkeys...){ @each $key, $value in $breakpointkeys { $_current_breakpoint_key:$key !global; @media #{map-get($breakpoints,$key)}{ @content; } $_current_breakpoint_key:'' !global; } }; // Mixin to add extends to each media query @mixin extends(){ @content; @each $key, $value in $breakpoints { @include media($key){ @content; } } } // Mixin to create cross media extends @mixin new-extend($name){ %#{ $_current_breakpoint_key + $name}{ @content; } } // Mixin to handle cross media extend @mixin extend($name){ & { @extend %#{ $_current_breakpoint_key + $name }; } } // ============================================= // How to use // ============================================= // Define breakpoints $breakpoints:( 'mobile' : '(max-width:480px)', 'tablet' : '(min-width:481px) and (max-width:960px)', 'desktop': '(min-width:961px)' ); // Create extends @include extends(){ @include new-extend(foo){ content:'foo extend'; } @include new-extend(bar){ content:'bar extend'; } @include new-extend(doh){ content:'doh extend'; } } // Extend .a { @extend %foo; @include extend(foo); } .b { @include media(mobile){ @include extend(foo); @include extend(bar); @include extend(doh); } @include media(tablet, desktop){ @include extend(foo); @include extend(bar); @include extend(doh); } } @include media(mobile){ .c { @include extend(foo); @include extend(bar); @include extend(doh); } } @include media(tablet, desktop){ .c { @include extend(foo); @include extend(bar); @include extend(doh); } }