[SCSS]便利な&（アンパサンド）の使い方メモ

SCSSにおいての&（アンパサンド）の使い方備忘録です。

基本の使い方

.class {
	&.hoge {
		background-color : #31A0FF;
	}
	
	&__foo {
		background-color: #FD997C;
	}
	
	&:hover {
		text-decoration: underline;
	}
}

コンパイル後のCSS

.class.hoge {
  background-color: #31A0FF;
}

.class__foo {
  background-color: #FD997C;
}

.class:hover {
  text-decoration: underline;
}

シンプルに.classの直後に&後の文字列がくっつきます。

&を組み合わせる

.class {
	& + & {
		margin-top: 1em;
	}

	&,
	&--hoge {
		margin-top: 1em;
	}
}

コンパイル後のCSS

.class + .class {
  margin-top: 1em;
}

.class, .class--hoge {
  margin-left: 1em;
}

特定の親要素の場合に適用

.class {
	color: #333;

	.parent & { // 親要素指定
		color: #8B5BB5;
	}

	.parent &__foo { // 親要素+class名変化
		color: #3B8C10;
	}
}

コンパイル後のCSS

.class {
  color: #333;
}

.parent .class {
  color: #8B5BB5;
}

.parent .class__foo {
  color: #3B8C10;
}

.class の中でも.parent内の.classにだけ適用したい時に便利です。

特定の親要素の応用

.class {
	$parent: &; // 親要素を変数に定義

	&__child {
		color: #333;

		#{$parent} & { // 親要素を変数で呼び出し
			color: #8B5BB5;
		}

		#{$parent}-hoge & { // 親要素を変数+class名変化で呼び出し
			color: #3B8C10;
		}
	}
}

コンパイル後のCSS

.class__child {
  color: #333;
}

.class .class__child {
  color: #8B5BB5;
}

.class-hoge .class__child {
  color: #3B8C10;
}

親要素のclass名を変化させられるのは便利ですね！
$hoge : &;これで変数に定義できるというのも驚きです。

@at-rootと組み合わせてルートから指定

@at-root 基本

@at-root を先頭につけると、階層を無視してコンパイルされます。

.parent {
	@at-root .class {
		display: flex;
	}
}

コンパイル後のCSS

.class {
  display: flex;
}

親要素の.parentを無視して.classが独立します。

@at-root と & の組み合わせ

@at-root はあまり使う機会はありませんが、&と組み合わせるとブラウザハックなどに便利です。

.class {
	display: flex;

	// IE10以降のハック
	@at-root _:-ms-input-placeholder, :root & {
		display: block;
	}
}

コンパイル後のCSS

.class {
  display: flex;
}

_:-ms-input-placeholder, :root .class {
  display: block;
}

以上になります。

プリプロセッサーで書く方法を覚えてしまうとCSS直書きには戻れませんね。

お役に立てたら幸いです。

---

下記のページを参考にさせていただきました。ありがとうございます。

▼Level up your Sass with the ampersand
https://codepen.io/hidanielle/post/level-up-your-sass-with-the-ampersand