Last active
August 29, 2015 14:15
-
-
Save jasonkmccoy/332674e5600696cd24c3 to your computer and use it in GitHub Desktop.
Sass BEM (BlockElementModifier) Mixin
This file contains hidden or 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
/* CSS Output */ | |
.block { | |
color: red; | |
} | |
.block__element { | |
color: green; | |
} | |
.block__element--modifier { | |
color: blue; | |
} |
This file contains hidden or 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 code */ | |
// Include an element in a block | |
=element($name) | |
@at-root &__#{$name} | |
@content | |
// Include a modifier in a block | |
=modifier($name) | |
@at-root &--#{$name} | |
@content | |
// Example Use | |
.block | |
color: red | |
+element(element) | |
color: green | |
+modifier(modifier) | |
color: blue |
This file contains hidden or 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
/* SCSS code */ | |
// Include an element in a block | |
@mixin element($name) { | |
@at-root &__#{$name} { | |
@content; | |
} | |
} | |
// Include a modifier in a block | |
@mixin modifier($name) { | |
@at-root &--#{$name} { | |
@content; | |
} | |
} | |
// Example Use | |
.block { | |
color: red; | |
@include element(element) { | |
color: green; | |
@include modifier(modifier) { | |
color: blue; | |
} | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Sass BEM (BlockElementModifier) Mixin
Adapted from a Mortar mixin
https://github.com/natgeo/mortar