Skip to content

Instantly share code, notes, and snippets.

@jasonkmccoy
Last active August 29, 2015 14:15
Show Gist options
  • Save jasonkmccoy/332674e5600696cd24c3 to your computer and use it in GitHub Desktop.
Save jasonkmccoy/332674e5600696cd24c3 to your computer and use it in GitHub Desktop.
Sass BEM (BlockElementModifier) Mixin
/* CSS Output */
.block {
color: red;
}
.block__element {
color: green;
}
.block__element--modifier {
color: blue;
}
/* 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
/* 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;
}
}
}
@jasonkmccoy
Copy link
Author

Sass BEM (BlockElementModifier) Mixin
Adapted from a Mortar mixin
https://github.com/natgeo/mortar

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment