CSS命名規則「BEM」を使うためのscss小技

※ 注意：各セレクターにはプロパティが入ってないとコンパイル結果には出てこないと思いますが、ここではすべて省略しています。

「&」で親セレクター継承

よくあるやつ

.block {
  &__element {
  }
  &--modifier {
  }
}

コンパイル後

.block {
}
.block__element {
}
.block--modifier {
}

コンパイル後「.block」を親に付けたければ

.block {
  #{&}__element {
  }
  #{&}--modifier {
  }
}

コンパイル後

.block {
}
.block .block__element {
}
.block .block--modifier {
}

mixin化

Mixinにしている情報を発見。
ここを元に。

mixin

@mixin e($element) {
  &__#{$element} {
    @content;
  }
}

@mixin m($modifier) {
  &--#{$modifier} {
    @content;
  }
}

使ったら

.block {
  @include e(element) {
  }
  @include m(modifier) {
  }
}

コンパイル後

.block {
}
.block__element {
}
.block--modifier {
}

引数（セレクタ）を何個も持てるように調整。

@mixin e($elements...) {
  @each $element in $elements {
    &__#{$element} {
      @content;
    }
  }
}

@mixin m($modifiers...) {
  @each $modifier in $modifiers {
    &--#{$modifier} {
      @content;
    }
  }
}

使ったら

.block {
  @include e(element) {
  }
  @include e(foo, bar) {
  }
  @include m(modifier, baz) {
  }
}

コンパイル後

.block {
}
.block__element {
}
.block__foo {
}
.block__bar {
}
.block--modifier {
}
.block--baz {
}

変数でセレクターの保存

Modifierの中のElementのスタイルを変えたい時

.block {

  &__element {
  }
  &--modifier {
    // ここで$__elementを書き換えたい。
  }
}

こうする

.block {
  $element: null;

  &__element {
    $element: &;
  }
  &--modifier {
    #{$element} {
    }
  }
}

コンパイル後

.block {
}
.block__element {
}
.block--modifier {
}
.block--modifier .block__element {
}

上のmixin使うと

.block {
  $element: null;

  @include e(element) {
    $element: &;
  }
  @include m(modifier){
    #{$element} {
    }
  }
}

コンパイル後

.block {
}
.block__element {
}
.block--modifier {
}
.block--modifier .block__element {
}

この場合引数は一つしか使えないので、複数使いたかったらこうする

.block {
  display: block;
  $elements: ();

  @include e(element1, element2) {
    $elements: append($elements, &);
  }

  @include m(modifier){
    @each $element in $elements {
      #{$element} {
      }
    }
  }
}

コンパイル後

.block {
}
.block__element1 {
}
.block__element2 {
}
.block--modifier {
}
.block--modifier .block__element1 {
}
.block--modifier .block__element2 {
}

複数Elementに共通スタイルを当てる

mixinに複数セレクタ入れればできるけど、別の方法。

%elementCommon {
}

.block {
  @include e(element1) {
    @extend %elementCommon;
  }
  @include e(element2) {
    @extend %elementCommon;
  }
}

コンパイル後

.block__element1, .block__element2 {
}

.block {
}
.block__element1 {
}
.block__element2 {
}

とりあえず以上。
増えたら追記します。