0.1
Repository is archived
No release in over 3 years
Low commit activity in last 3 years
A simple way for DRYier, faster and cleaner Modernizr tests in Sass.
2005
2006
2007
2008
2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
 Dependencies

Runtime

~> 1.0.0
~> 3.4
 Project Readme

NO LONGER MAINTAINED


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: #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 Kitty Giraudel for the code review and tweaks.