Skip to content

Instantly share code, notes, and snippets.

@lunelson
Created October 15, 2013 10:17
Show Gist options
  • Save lunelson/6989507 to your computer and use it in GitHub Desktop.
Save lunelson/6989507 to your computer and use it in GitHub Desktop.
Modernizr and Yep / Nope functions
// ----
// Sass (v3.2.10)
// Compass (v0.13.alpha.4)
// ----
// MODERNIZR Checks following "yep" and "nope" conventions
@mixin modernizr($tests...) {
$selector: 'html';
@each $test in $tests { $selector: "#{$selector}.#{$test}"; }
#{$selector} & { @content; }
}
@mixin yep($tests...) {
$selector: 'html';
@each $test in $tests { $selector: "#{$selector}.#{$test}"; }
#{$selector} & { @content; }
}
@mixin nope($tests...) {
$selector: 'html';
@each $test in $tests { $selector: "#{$selector}.no-#{$test}"; }
#{$selector} & { @content; }
}
.test {
color: blue;
@include yep(csscolumns) {
columns: 2;
}
@include nope(columns, borders) {
color: red;
}
@include modernizr(borders, no-csscolumns) {
width: 100%;
}
}
.test {
color: blue;
}
html.csscolumns .test {
columns: 2;
}
html.no-columns.no-borders .test {
color: red;
}
html.borders.no-csscolumns .test {
width: 100%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment