【Sass】親セレクタを参照する&や+の使い方

親セレクタを参照する & や + のやつ

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

.hoge {
  width: 640px;

  .fuga & {
    width: 100%;
  }
}

css

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

注意

3階層以上の場合は、& を使うと上の階層で指定した親要素すべてが対象になるということ。
3階層目で.fuga & とした場合
".hoge　.hoge__hoge　.fuga　" や
".hoge　.fuga　.hoge__hoge" ではなく
".fuga　.hoge　.hoge__hoge" となる。

Sass

.hoge {
  width: 640px;

  &__hoge {
    margin: 10px;

    .fuga & {
      margin: 0;
    }
  }
}

css

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

セレクタの後に　+ &　を記述する

Sass

.hoge {
  color: #000;

  .fuga + & {
    color: #ccc;
  }

  .fuga + & &__hoge {
    color: #ccc;
  }
}

css

.hoge {color: #000;}
.fuga .hoge {color: #ccc;}
.fuga .hoge .hoge__hoge {color: #ccc;}