Sass BEM Mixins

_bem-builder.scss

@mixin element($name) {
  @at-root #{&}__#{$name}{
    @content;
  }
}

@mixin modifier($name) {
  @at-root #{&}--#{$name} {
    @content;
  }
}

@mixin modified-by($arg) {
  .#{$arg} & {
    @content;
  }
}

_navbar.scss

.navbar {
  padding-top: 1.875rem;
  @include element('list') {
    display: block;
    @include modified-by('navbar--center') {
      display: inline-block;
    }
  }
  @include element('item') {
    float: left;
  }
  @include element('link') {
    display: block;
    padding: 1.25rem;
    font-size: 1rem;
    font-weight: bold;
    text-transform: uppercase;
    @include modifier('active') {
      background-color: crimson;
      color: white;
    }
  }
  @include modifier('center') {
    text-align: center;
  }
}

styles.css

.navbar {
  padding-top: 1.875rem;
}

.navbar__list {
  display: block;
}

.navbar--center .navbar__list {
  display: inline-block;
}

.navbar__item {
  float: left;
}

.navbar__link {
  display: block;
  padding: 1.25rem;
  font-size: 1rem;
  font-weight: bold;
  text-transform: uppercase;
}

.navbar__link--active {
  background-color: crimson;
  color: white;
}

.navbar--center {
  text-align: center;
}

styles.scss

@import 'bem-builder';
@import 'navbar';