Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Modernizr and js/no-js mixins for Sass
// Taken from: http://codepen.io/sturobson/pen/xcdha
// Modernizr mixin to create html.modernizr selector
@mixin modernizr($test, $no: true) {
// if false then give the html.no-modernizr selector
@if $no == true {
html.no-#{$test} & {
@content;
}
}
// else give html.modernizr selector
@if $no != false {
html.#{$test} & {
@content;
}
}
}
// just for an example
.selector {
left: 0;
@include modernizr(cssanimations) {
left: 400px;
}
@include modernizr(cssanimations, false) {
background: red
}
}
// js/no-js mixin to easily create fallbacks
@mixin js($isthereJS: false) {
// .no-js selector
@if $isthereJS == false {
.no-js & {
@content;
}
}
// .js selector
@if $isthereJS != false {
.js & {
@content;
}
}
}
// just for an example
.selector {
width: 300px;
@include js {
width: 303px;
}
@include js(true) {
width: 280px;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment