Modernizr mixin

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

Install

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: https://github.com/danielguillan/modernizr-mixin/issues/24

There are 4 ways of installing the Modernizr mixin:

Download

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

Bower

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

Usage

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.

yep

Prints classes for supported features.

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

nope

Prints classes for unsupported features and unavailable Javascript.

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

Example

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;
}

Credits

Thanks Hugo Giraudel for the code review and tweaks.