-
-
Save zipme/7806366 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // ---- | |
| // 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; | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| 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