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: danielguillan#24

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

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

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.