A Pen by jakob-e.

Extending-within-the-@media-directive-.markdown

Extending within the @media directive

A Pen by jakob-e on CodePen.

License.

index.html

<h1>Extending within the @media directive.</h1>
<p>Click (SCSS) in the CSS pane to see the CSS Output</p> 

style.scss

@import "compass";
html {background:#282828; padding:20px; }
h1,p { font:30px arial,sans-serif; color:#fff;  }
p { font-size:14px;}

// ====================================================================
// Breakpoints
// Define a global list of breakpoints
// (key, min-width, max-width),...
// Note! zero will omit the query
// ==================================================================== 
$breakpoints: 
     (all,0,0)
    ,(desktop,769,0)
    ,(tablet,481,768)
    ,(mobile,0,480);


// ====================================================================
// Media
// Prints out a media query from the breakpoints list 
// ==================================================================== 
@mixin media($key){ // @content
    $bp:null;
    @for $i from 1 through length($breakpoints){
        $item:nth($breakpoints,$i);
        @if(nth($item,1)==$key){ $bp:$item; }
    }
    $min:nth($bp,2) * 1px; 
    $max:nth($bp,3) * 1px;
    $mq:'screen and (min-width:'+$min+') and (max-width:'+$max+')'; 
    @if($min and $max==0px){ $mq:'screen and (min-width:'+$min+')'; }
    @if($min==0px and $max){ $mq:'screen and (max-width:'+$max+')'; }
    @if($min==0px and $max==0px){ $mq:'all'; }
    @media #{unquote($mq)}{ @content; }
}


// ==================================================================== 
// MediaExtend
// Places each extend within the each media directive of the breakpoint list
// ==================================================================== 
@mixin mediaExtend(){ // @content
    @for $i from 1 through length($breakpoints){
        $key:nth(nth($breakpoints,$i),1);
        @include media($key){ @content; };
    }
}





// ==================================================================== 
// Create the media extends.
// ... to test the output just add a regular extend
// @include mediaExtend(){ .test{ content:'test'}}
// 
@include mediaExtend(){
    %red { color:red; }
    %blue { color:blue; }
    %green { color:green; }
    %yellow { color:yellow; }
}


// ==================================================================== 
// Using media as wrapper 
//
@include media(all){
  .foo { @extend %red; }
  .bar { @extend %blue; }
}
@include media(mobile){
  .foo { @extend %blue; }
  .bar { @extend %yellow; }
}
@include media(tablet){
  .foo { @extend %green; }
  .bar { @extend %green; }
}

// CSS Output
// @media all {
//   .foo { color: red; }
//   .bar { color: blue; }
// }
// @media screen and (min-width: 481px) and (max-width: 768px) {
//   .foo, .bar { color: green; }
// }
// @media screen and (max-width: 480px) {
//   .foo { color: blue; }
//   .bar { color: yellow; }
// }


// ==================================================================== 
// Wrapping media
// 
.foo { @include media(tablet){ @extend %green } }
.bar { @include media(tablet){ @extend %green } }

// CSS Output
@media screen and (min-width: 481px) and (max-width: 768px) {
  .foo, .bar {  color: green; }
}


// --------------------------
// Note! when passing non-media-estend @content to the media mixin
//  - CSS Output order is set by the include order  not the order 
// of the breakpoints list... Be careful if your list contains
// overlapping breakpoints
// 
.foo { @include media(tablet){ content:'tablet'; } }
.foo { @include media(mobile){ content:'mobile'; } }
.foo { @include media(all)   { content:'all';    } }

// CSS Output
// @media screen and (min-width: 481px) and (max-width: 768px) {
//   .foo { content: 'tablet'; }
// }
// @media screen and (max-width: 480px) {
//   .foo { content: 'mobile'; }
// }
// @media all {
//   .foo { content: 'all';  }
// }