BEM helper mixins for Sass

_mixin-bem.sass

// Mixins for generating Block Element Modifier (BEM) class names.
// See https://css-tricks.com/snippets/sass/bem-mixins/
// They can be nested to produce meaningful classes.
// To create a descendant selector like `.block--modifier .block__element`
// the block needs to be repeated. For example:
// +block(some-block)
//
//   +element(some-element)
//     color: red
//
//   +modifier(some-modifier)
//     color: blue
//
//     +block(some-block)
//       +element(some-element)
//         color: green
//
//   &:hover
//     +block(some-block)
//       +element(some-element)
//         background-color: #fffafa
//
// These mixins also prefix the block name. The example above produces
// selectors like .prefix-some-block, .prefix-some-block__some-element etc.

// Prefix all block names with this
$blockPrefix: 'prefix-'

// BEM mixins
// See https://css-tricks.com/snippets/sass/bem-mixins/

// Generates a block class selector
// e.g. “.prefix-name”
@mixin block($name)
  .#{$blockPrefix}#{$name}
    @content

// Inside a block, generates an element class selector
// e.g. “.prefix-name__element”
@mixin element($name)
  &__#{$name}
    @content

// Same styles for multiple elements
// e.g. “@include elements(element1 element2)”
// becomes “.prefix-name__element1, .prefix-name__element2”
@mixin elements($names...)
  $selector: ()
  @each $name in $names
    $selector: append($selector, unquote('&__#{$name}'), comma);
  #{$selector}
    @content

// Inside a block, generates an modifier class selector
// e.g. “.prefix-name--modifier”
@mixin modifier($name)
  &--#{$name}
    @content