Modernizr mixin Build Status Bower version Gem Version

A simple way for DRYier, faster and cleaner Modernizr tests in Sass.


Requires Ruby Sass 3.4 or LibSass 3.2

LIBSASS WARNING: There is a known bug in Libsass 3.2.3 and 3.2.4 that makes Modernizr mixin output incorrect selectors. The only workaround until the bug is patched is to stick to Libsass 3.2.2.

There are 4 ways of installing the Modernizr mixin:


Download _modernizr.scss and place it in your Sass directory.


Run the following command:

bower install --save-dev modernizr-mixin

Compass extension

  1. gem install modernizr-mixin
  2. Add require 'modernizr-mixin' to your config.rb

npm / Eyeglass module

npm install --save-dev modernizr-mixin


Import it into your main stylesheet:

@import 'modernizr';

Or if you are using Eyeglass:

@import 'modernizr-mixin/_modernizr';

The Modernizr helper includes two mixins: yep and nope. Simply pass a comma-separeted list (argList) of features as argument and the rules you need to print.


Prints classes for supported features.

@include yep($features...) { ... }


Prints classes for unsupported features and unavailable Javascript.

@include nope($features...) { ... }


Sass input:

.my-selector {
    @include yep(translate3d, opacity) {
        transform: translate3d(0, 100px, 0);
        opacity: 0;
    @include nope(translate3d, opacity) {
        top: 100px;
        display: none;

CSS output:

.translate3d.opacity .my-selector {
  transform: translate3d(0, 100px, 0);
  opacity: 0;
.no-js .my-selector,
.no-translate3d .my-selector,
.no-opacity .my-selector {
  top: 100px;
  display: none;


Thanks Hugo Giraudel for the code review and tweaks.