[Sass & Compass] Sass で BEM を使う場合の syntax を確認する

Sass 3.3 から & (Ampersand) で表現できるようになっているので、その記法を確認します。

[markdown]
> * [File: SASS_CHANGELOG — Sass Documentation](http://sass-lang.com/documentation/file.SASS_CHANGELOG.html)

## Sass 3.3 以前

Sass 3.3 RC では、こちらで紹介されているような記法だったよう。

> * [Sass 3.3で追加された「&」の新機能と@at-rootまとめ解説 | HTML5Experts.jp](http://html5experts.jp/kosei27/3297/)

“`css
.at-block
color: blue
@at-root
#{&}__element/* .block__element */
color: green
@at-root
#{&}–modifier/* .block__element–modifier */
color: red
“`

もしくは mixin をつかって書く。

> * [SASSを使ってBEMで記述](http://howtohp.com/2013/12/27/sass-bem/)

## Sass 3.3 以降

今現在はこのようにスッキリ書くことができます。

> * [File: SASS_REFERENCE — Sass Documentation](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#parent-selector)

“`css
.and-block
color: blue
&__element/* .block__element */
color: green
&–modifier/* .block__element–modifier */
color: red
“`

CSS だけのパターンとあわせて。

.block
  color: blue
.block__element/* .block__element */
  color: green
.block__element--modifier/* .block__element--modifier */
  color: red
.and-block
  color: blue
  &__element/* .block__element */
    color: green
    &--modifier/* .block__element--modifier */
      color: red
.at-block
  color: blue
  @at-root
    #{&}__element/* .block__element */
      color: green
      @at-root
        #{&}--modifier/* .block__element--modifier */
          color: red
/* CSS decoration
div
  border: solid 1px #ccc
  margin: 0 auto 1em auto
  width: 50%

[/markdown]