, ,

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

公開日: 2015/01/27
更新日: 2018/10/26

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

Sass 3.3 以前

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

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

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

Sass 3.3 以降

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

.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%

See the Pen Sass BEM style selector syntax by DriftwoodJP (@DriftwoodJP) on CodePen.