Skip to content

Instantly share code, notes, and snippets.

@jordanlewiz
Forked from lunelson/SassMeister-input.scss
Created December 4, 2013 21:26
Show Gist options
  • Save jordanlewiz/7795907 to your computer and use it in GitHub Desktop.
Save jordanlewiz/7795907 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.10)
// ----
// Based on BEM helper mixins by @lunelson (http://sassmeister.com/gist/7786284)
// Altered to use Sass and the EnvatoCSS syntax (http://webuild.envato.com/blog/how-to-scale-and-maintain-legacy-css-with-sass-and-smacss/)
=modifier($name)
@at-root
$selector: nth(&, 1)
$direct-parent: nth($selector, length($selector))
#{$direct-parent}--#{$name}
@extend #{$direct-parent}
#{&}--#{$name}
@content
=child($name)
@at-root
#{&}__#{$name}
@content
.button
padding: 0.5em
border-radius: 0.25em
+modifier('good')
background-color: green
+modifier('bad')
background-color: red
+child('icon')
margin-left: 1em
+modifier('good')
color: green
+modifier('bad')
color: red
.button, .button--good, .button--bad {
padding: 0.5em;
border-radius: 0.25em;
}
.button--good {
background-color: green;
}
.button--bad {
background-color: red;
}
.button__icon, .button__icon--good, .button__icon--bad {
margin-left: 1em;
}
.button__icon--good {
color: green;
}
.button__icon--bad {
color: red;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment