Created
November 23, 2018 11:38
-
-
Save miladvafaeifard/b4a25415ef2bd3feb875dfe565500efb to your computer and use it in GitHub Desktop.
The Block, Element, Modifier methodology (commonly referred to as BEM) is a popular naming convention for classes in HTML and CSS. Developed by the team at Yandex, its goal is to help developers better understand the relationship between the HTML and CSS in a given project.
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
@mixin e($elements...) { | |
$selector: (); | |
@each $element in $elements { | |
$selector: append($selector, unquote("&__" + $element), comma); | |
} | |
#{$selector} { | |
@content; | |
} | |
} | |
@mixin m($modifiers...) { | |
$selector: (); | |
@each $modifier in $modifiers { | |
$selector: append($selector, unquote("&--" + $modifier), comma); | |
} | |
#{$selector} { | |
@content; | |
} | |
} | |
.block { | |
@include e(child) { | |
background: teal; | |
@include m(featured, important) { | |
background: crimson; | |
} | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
output:
.block__child {background: teal;}
.block__child--featured, .block__child--important {background: crimson;}