Simple and comprehensive mixin for Modernizr tests in Sass
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
stylesheets Add test to warn developer for Libsass 3.2.3 / 3.2.4 regression bug. Jun 12, 2015
tests Eyeglass support added. Jun 2, 2015
.npmignore Eyeglass support added. Jun 2, 2015
.travis.yml Refactor for Sass 3.4. #10 Aug 31, 2014
Gemfile Tests and Travis integration Jul 2, 2014
LICENSE Added License Apr 4, 2014
package.json Bump version of dependency eyeglass Oct 19, 2015

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 through 3.2.5 that makes Modernizr mixin output incorrect selectors. The only workaround until the bug is patched in the next Libsass release is to stick to Libsass 3.2.2. More info:

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.