Sassの&(アンパサンド)を使って親セレクタを参照する方法

今回はSassを使うなら絶対に覚えておくべき「&」の使い方を紹介します。

 

&の使い方

&の基本的な意味は「親セレクタの参照」です。

CSSにコンパイルすると&の部分が親セレクタに変わると思ってください。

例えばSassで以下のように書くとCSSではこんな感じにコンパイルされます。

Sass

.hoge {
  color: #000;

  &:hover {
    color: #fff;
  }

  &.fuga {
    color: #ccc;
  }
}

 

CSS

.hoge {color: #000;}
.hoge:hover {color: #fff;}
.hoge.fuga {color: #ccc;}

 

&の部分が親セレクタに置き換えられているのがわかると思います。

 

セレクタの後に記述する

セレクタの後に&を使ってSassを書くと、CSSではこんな感じでコンパイルされます。

Sass

.hoge {
  width: 640px;

  .fuga & {
    width: 100%;
  }
}

 

CSS

.hoge {width: 640px;}
.fuga .hoge {width: 100%;}

 

やっぱり&がそのまま親セレクタに置き換わっています。

 

3階層以上で&を使う

&はこれまでの親要素の全てを参照します。

なので3階層以上で書くと、それより上の階層全てのセレクタが出力されます。

Sass

.hoge {
  width: 640px;

  &__hoge {
    margin: 10px;

    .fuga & {
      margin: 0;
    }
  }
}

 

CSS

.hoge {width: 640px;}
.hoge__hoge {margin: 10px;}
.fuga .hoge .hoge__hoge {margin: 0;}

 

ネストを深くしすぎるとCSSの詳細度がどんどん高くなって破綻しかねないので注意しましょう。