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