Skip to content
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.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
lib
stylesheets
tests
.gitignore
.npmignore
.travis.yml
CHANGELOG.md
Gemfile
LICENSE
README.md
Rakefile
bower.json
eyeglass-exports.js
modernizr-mixin.gemspec
package.json
sache.json

README.md

Modernizr mixin Build Status Bower version Gem Version

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.

You can’t perform that action at this time.