scss BEM-SASS

Posted 2021-05-17

//Once you import bem-sass to your project, 
//you can simply build your own css object like below:

@include block(menu) {
  @include element(item) { }
  @include modifier(horizontal) { }
}
//Compiled:
.menu { }
.menu__item { }
.menu_horizontal { }

//You can configure bem-sass options by 'configure-bem-sass' mixin. 
//Default options:
@include configure-bem-sass ((
  default-prefix: "",
  block-levels: (),
  element-sep: "__",
  modifier-sep: "_"
));

//: default-prefix
@include configure-bem-sass((
  default-prefix: "b-" // Set default block prefix to "b-"
));
//compiled:
.b-menu {}
.b-menu__item {}

//: block-levels
//Sometimes you may need to define several block types to organize your css object structure 
//especially when you are considering a methodology like ITCSS. 
//You can define your own several block levels by adding 'level-name(string): prefix(string)''
@include configure-bem-sass((
  block-levels: (
    object:    "o-",  
    component: "c-"
  )
));
/* Media object */
@include block(media, "object") { }
/* Menu component */
@include block(menu, "component") { }
When compiled:
.o-media {}
.c-menu {}

//: element-sep, modifier-sep
@include configure-bem-sass((
  // Set separators like Medium.com
  element-sep: "-",
  modifier-sep: "--"
));

/* Promo block */
@include block(promo) {
  @include element(title) {}
  @include modifier(hero) {}
}
//compiled:
.promo {}
.promo-title {}
.promo--hero {}



/*
ADVANCED TOPICS
*/

//: Boolean Modifier & Key-Value Modifier
//passing a single argument to 'modifier' generates a boolean modifier, 
//whereas passing 2 arguments generates a key-value modifier.

@include block(menu) {
  @include modifier(hidden) {}
  @include modifier(theme, morning-forest) {}
  @include modifier(theme, stormy-sky) {}
}
//compiled
.menu_hidden {}
.menu_theme_morning-forest {}
.menu_theme_stormy-sky {}

//: Element Modifier
//Elements could also get modified by their own modifiers.

@include block(menu) {
  @include element(item) {
    @include modifier(visible) {}
    @include modifier(type, radio) {}
  }
}
//compiled
.menu__item_visible {}
.menu__item_type_radio {}


//: Using Cascades in BEM
@include block(nav) {
  @include element(item) {}
  @include modifier(theme, islands) {
    @include element(item) {
    }
  }
}
//compiled:
.nav {}
.nav__item {}
.nav_theme_islands {}
.nav_theme_islands > .b-nav__item {}


//: Adjacent Sibling Elements in a Modifier
//Given that you want to add a top line to each item of a modified nav block except the first item. 
//With & provided by the original Sass, you cannot achieve this requirement. 
//In that kind of circumstance, you can use adjacent-siblings mixin.

@include block(nav) {
  @include modifier(secondary) {
    @include element(item) {

      // Using & + & produces `.nav_secondary .nav__item + .nav_secondary .nav__item` 
      // which we do not expect.
      // Use `adjacent-siblings` here.

      @include adjacent-siblings {
        border-top: 1px solid rgb(0, 0, 0);
      }
    }
  }
}
//compiled:

.nav_secondary > .nav__item + .nav__item {
  border-top: 1px solid rgb(0, 0, 0);
}


//: Shared CSS Rules Between Elements
//Given that nav__item and nav__link have common CSS rules. 
//Since bem-sass enforces immutability on every BEM entity, it seems that 
//the only way to avoid an inevitable code duplication is using Sass placeholder and @extend.

@include block(nav) { 
  %shared-rules { // <--- BAD: A placeholder inside block generates unwanted nested selectors
    display: inline-block;
    height: 100%;
  }
  @include element(item) {
    @extend %shared-rules; 
  }
  @include element(link) {
    @extend %shared-rules;
  }
}
//But when compiled, this produces unexpected nested selectors like below:
.nav .nav__item,
.nav .nav__link {
  display: inline-block;
  height: 100%;
}

//To avoid this, bem-sass provides def-shared-rules and shared-rules.
@include block(nav) {
  @include def-shared-rules("items") { //*Note that def-shared-rules and 
  //shared-rules should be inside of a block.
    display: inline-block;
    height: 100%;
  }
  @include element(item) {
    @include shared-rules("items");
  }
  @include element(link) {
    @include shared-rules("items");
  }
}
//compiled
.nav__item,
.nav__link {
  display: inline-block;
  height: 100%;
}