Utilizing Sass 3.3 ".scss syntax" for implementing BEM nesting with a custom mixin:
@mixin e($name) {
@at-root #{&}__#{$name} {
@content;
}
}
Applying the mixin in this manner:
.header {
background:red;
@include e(logo) {
background:green;
@include e(inner) {
background:blue;
}
}
}
The resulting output is as follows:
.header {
background:red;
}
.header__logo {
background:green;
}
.header__logo__inner {
background:blue;
}
The desired output, however, should be:
.header {
background:red;
}
.header__logo {
background:green;
}
.header__logo-inner {
background:blue;
}
It can be observed that the __ convention changes to a - for the inner element.
An additional mixin could resolve this issue, but the objective is for the e mixin to handle it automatically. The tentative outline for modifying the e mixin is as follows:
@mixin e($name) {
@if 'sub-component' {
@at-root #{&}__#{$name} {
@content;
}
} @else if 'sub-sub-component' {
@at-root #{&}-#{$name} {
@content;
}
}
}