ここしばらくデザイン系の仕事が多く、マークアップをメインに作業していませんでしたが、今回改めてSassを使用する機会がふえてきましたので、自分用のメモとしても&（アンパサンド）の使い方を中心にまとめておきたいと思います。
基本的な使い方
.hoge {
clor: #fff
;
&__foo {
margin:0 auto;
}
&__hoo {
padding:10px;
&:hover {
opacity: .8;
}
}
}
コンパイル後
.hoge {
color: #fff;
}
.hoge__foo {
margin:0 auto;
}
.hoge__hoo {
padding: 10px;
}
.hoge__hoo:hover {
opacity: .8;
}
セレクタの後に&をつける
hoge__fooの要素を使用しながら親のクラス名を別で指定し、特定の要素を追加したい時に便利ですね！
.hoge {
&__foo {
margin:0 auto;
.hoo & {
padding :10px;
}
}
}
コンパイル後
.hoge__foo {
margin: 0 auto;
}
.hoo .hoge__foo {
padding: 10px;
}
３階層目でセレクタ後に&をつける場合
3階層目でセレクタ後に&を指定すると、親の全てのクラスが指定されます。
順番に気をつけましょう。
.hoge {
color: #fff;
&__foo {
margin:0 auto;
.hoo & {
padding: 10px;
}
}
}
コンパイル後
.hoge {
color: #fff;
}
.hoge__foo {
margin:0 auto;
}
.hoo .hoge .hoge__foo {
padding: 10px;
}
extendをうまく使おう！
別のクラス名hoge__hoo–activeの場合にもhoge__fooの要素を使用したい場合は、ectendを使うと便利です。
.hoge {
&__foo {
margin:0 auto;
}
&__hoo--active {
padding: 10px;
@extend .hoge__foo
;
}
}
コンパイル後
.hoge__foo,
.hoge__hoo--active {
margin:0 auto;
}
.hoge__hoo--active {
padding: 10px;
}
応用編
&やextendを上手く使えばソース量も減ってパフォーマンスも向上しますね！！
.hoge {
&__foo {
margin:0 auto;
}
&__hoo--active {
padding: 10px;
@extend .hoge__foo
;
.doo & {
color: #fff;
}
}
}
コンパイル後
.hoge__foo,
.hoge__hoo--active {
margin:0 auto;
}
.hoge__hoo--active {
padding: 10px;
}
.doo .hoge__hoo--active {
color: #fff;
}
