Skip to content

Instantly share code, notes, and snippets.

@illycz
Forked from lunelson/SassMeister-input.scss
Created December 4, 2013 21:24
Show Gist options
  • Save illycz/7795881 to your computer and use it in GitHub Desktop.
Save illycz/7795881 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com. http://sassmeister.com/gist/7795881
// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.10)
// ----
/*
A slightly more automated approach to BEM modifier classes:
using '&' parent selector interpolation, modifiers extend their bases,
so that HTML markup requires only the modifier class not the base *and* modifier
*/
// the BEM modifier() mixin
@mixin modifier($name) {
@at-root {
// '&' is a double-wrapped list
$selector: nth(&, 1);
// direct parent will be the last item in that list
$direct-parent: nth($selector, length($selector));
// modifier should have all properties of parent
#{$direct-parent}--#{$name} { @extend #{$direct-parent}; }
// '@content' will be in a nested selector however, if that is the context
#{&}--#{$name} { @content; }
}
}
// a BEM element() mixin--as has been seen elsewhere
@mixin element($name) {
@at-root {
#{&}__#{$name} {
@content;
}
}
}
/*
Example: the .button here in HTML
would only require its modifier class, not both base and modifier
e.g. class="button--good" not class="button button--good"
*/
.button {
padding: 0.5em;
border-radius: 0.25em;
@include modifier('good') {
background-color: green;
}
@include modifier('bad') {
background-color: red;
}
@include element('icon') {
margin-left: 1em;
@include modifier('good') {
color: green;
}
@include modifier('bad') {
color: red;
}
}
}
/*
Also: due to mechanics of '@extend', other appearances of the base class
will output all the modifiers, regardless of source-order
--normally something that annoys me but in this case an advantage
*/
.some-context {
.button {
height: 100px;
}
}
/*
A slightly more automated approach to BEM modifier classes:
using '&' parent selector interpolation, modifiers extend their bases,
so that HTML markup requires only the modifier class not the base *and* modifier
*/
/*
Example: the .button here in HTML
would only require its modifier class, not both base and modifier
e.g. class="button--good" not class="button button--good"
*/
.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;
}
/*
Also: due to mechanics of '@extend', other appearances of the base class
will output all the modifiers, regardless of source-order
--normally something that annoys me but in this case an advantage
*/
.some-context .button, .some-context .button--good, .some-context .button--bad {
height: 100px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment