Modernizr and js/no-js mixins for Sass

modernizr-sass.scss

// Taken from: http://codepen.io/sturobson/pen/xcdha

// Modernizr mixin to create html.modernizr selector 
@mixin modernizr($test, $no: true) {
  // if false then give the html.no-modernizr selector
  @if $no == true {
    html.no-#{$test} & {
      @content;
    }
  }
  // else give html.modernizr selector
  @if $no != false {
    html.#{$test} & {
      @content;
    }    
  }
}

// just for an example
.selector {
  left: 0;
  
  @include modernizr(cssanimations) { 
    left: 400px; 
  }
  @include modernizr(cssanimations, false) { 
    background: red 
  }  
}

// js/no-js mixin to easily create fallbacks
@mixin js($isthereJS: false) {
  // .no-js selector
  @if $isthereJS == false {
    .no-js & {
      @content;
    }
  }
  // .js selector
  @if $isthereJS != false {
    .js & {
      @content;
    }    
  }
}


// just for an example
.selector {
  width: 300px;
  
  @include js {
    width: 303px;  
  }
  
  @include js(true) {
    width: 280px;  
  }
}