Using these mixins makes it easy to work with BEM syntax in sass 3.3.2:
=b($name)
.#{$name}
@content
=e($name)
&__#{$name}
@content
=m($name)
&--#{$name}
@content
+b(menu)
+e(item)
color: grey
+e(item)
+m(alert)
color: red
With this setup, we get the desired result:
.menu__item {color: grey;}
.menu__item--alert {color: red;}
However, issues arise when dealing with block level modifiers:
+b(menu)
+m(theme-1)
+e(item)
color: blue
The CSS output is:
.menu--theme-1__item {color: blue;}
But what is actually needed is:
.menu--theme-1 .menu__item {color: blue;}
An attempt was made to determine the context of an element using parent selectors within the mixin, but it did not fully solve the issue.
Update A workaround was discovered by adding a context argument to the element mixin:
=e($name, $context:null)
@if $context
&
+b($context)
&__#{$name}
@content
@else
&__#{$name}
@content
Now, the mixin can be called as follows:
+b(menu)
+m(theme-1)
+e(item, nav)
color: blue
This results in:
.menu--theme-1 .menu__item {color: blue;}