Element Modifierと同じノリでElementの見た目を変えれるBlock ModifierのSassの書き方

```block-modifier.sass
=block--($modifier)
  $current: &
  $block: str_slice("#{&}", 0, str-index("#{&}", "__") - 1)

  @at-root #{$block}
    &--#{$modifier}
      #{$current}
        @content
```

使い方
----

親のBlockにModifierが指定されている場合のElementの見た目を、Element以下にネストして書ける。

```user-icon.sass
.user-icon
  &__image
    width: 100px
    height: 100px

    +block--(round)
      border-radius: 50px
```

```user-icon.css
.user-icon__image {
  width: 100px;
  height: 100px;
}
.user-icon--round .user-icon__image {
  border-radius: 50px;
}
```

動機: BlockにModifierを付けたい　
----

HTMLマークアップするときElementにModifierつけると書くのがダルいし横長になる。

```haml
.list
  %li.list__item.list__item--icebox 海に行く🏊
  %li.list__item.list__item--icebox スイカ割る🍉
```

BlockにModifierつけると横幅減って読みやすい

```haml
.list.list--icebox
  %li.list__item 海に行く🏊
  %li.list__item スイカ割る🍉
```

BlockのModifierによってElementの見た目を変えるのはしんどい
----

Sassが書きづらい

参考: [BEMでmodifierを作る時に便利な&の変数化パターン](http://qiita.com/y_hokkey/items/70eb2bc1394d74989359)

```sass
.list
  $self: &
  &__item
    // デフォルトの項目の見た目
  &--icebox
    #{$self}__item
      // iceboxに入っている項目の見た目
```

一方Elementにmodifierをつけるとこんな感じ。

```sass
.list
  &__item
    // デフォルトの項目の見た目
    &--icebox
      // iceboxに入っている項目の見た目
```

Blockのmodifierによって見た目を変えたいElementが他にもある場合、BlockのModifierでまとめようとするとこんな感じになってElementの定義と離れてしまう

```sass
.list
  $self: &
  &__item
    // デフォルトの項目の見た目
  &__foo
    // デフォルトのfooの見た目
  &__bar
    // デフォルトのbarの見た目
  &__fizzbuzz
    // デフォルトのfizz buzzの見た目
  &--icebox
    #{$self}__item
      // iceboxに入っている項目の見た目
    #{$self}__foo
      // iceboxに入っているfooの見た目
    #{$self}__bar
      // iceboxに入っているbarの見た目
    #{$self}__fizzbuzz
      // iceboxに入っているfizz buzzの見た目
```

それぞれのElementの下に書くと縦に伸びるし凸凹感がすごい

```sass
.list
  $self: &

  &__item
    // デフォルトの項目の見た目
  &--icebox
    #{$self}__item
      // iceboxに入っている項目の見た目
  &__foo
    // デフォルトのfooの見た目
  &--icebox
    #{$self}__foo
      // iceboxに入っているfooの見た目
  &__bar
    // デフォルトのbarの見た目
  &--icebox
    #{$self}__bar
      // iceboxに入っているbarの見た目
  &__fizzbuzz
    // デフォルトのfizz buzzの見た目
  &--icebox
    #{$self}__fizzbuzz
      // iceboxに入っているfizz buzzの見た目
```

mixinを使うと便利
----

```block-modifier.sass
=block--($modifier)
  $current: &
  $block: str_slice("#{&}", 0, str-index("#{&}", "__") - 1)

  @at-root #{$block}
    &--#{$modifier}
      #{$current}
        @content
```

このmixinを使うとこのSassが

```sass
.list
  $self: &;
  &__item
    // デフォルトの項目の見た目
  &--icebox
    #{$self}__item
      // iceboxに入っている項目の見た目
```

こうなる

```sass
.list
  &__item
    // デフォルトの項目の見た目
    +block--(icebox)
      // iceboxに入っている項目の見た目
```

このSassが

```sass
.list
  $self: &
  &__item
    // デフォルトの項目の見た目
  &__foo
    // デフォルトのfooの見た目
  &__bar
    // デフォルトのbarの見た目
  &__fizzbuzz
    // デフォルトのfizz buzzの見た目
  &--icebox
    #{$self}__item
      // iceboxに入っている項目の見た目
    #{$self}__foo
      // iceboxに入っているfooの見た目
    #{$self}__bar
      // iceboxに入っているbarの見た目
    #{$self}__fizzbuzz
      // iceboxに入っているfizz buzzの見た目
```

こう

```sass
.list
  &__item
    // デフォルトの項目の見た目
    +block--(icebox)
      // iceboxに入っている項目の見た目
  &__foo
    // デフォルトのfooの見た目
    +block--(icebox)
      // iceboxに入っているfooの見た目
  &__bar
    // デフォルトのbarの見た目
    +block--(icebox)
      // iceboxに入っているbarの見た目
  &__fizzbuzz
    // デフォルトのfizzbuzzの見た目
    +block--(icebox)
      // iceboxに入っているfizz buzzの見た目
```

まとめ
----

SassとBEMべんり

もう少し汎用的にするとこういう感じです。

```within-block.sass
=within-block($s)
  $current: &
  $block: str_slice("#{&}", 0, str-index("#{&}", "__") - 1)

  @at-root #{$block}#{$s} &
    @content

.user-icon
  &__image
    width: 100px
    height: 100px

    +within-block(--round)
      border-radius: 50px

    +within-block(".is-round")
      border-radius: 50px
```