Tech Labo F

SCSS（Sass）を使っていると必ず目にする「&」と「,」。これらを正しく理解して使いこなすことで、

コーディングの速度と保守性が劇的に向上します。

今回は、基本の挙動から実務でよく使う応用パターンまでを解説します。

1. & (アンパサンド) ：親要素をスマートに参照する

SCSSにおいて最も重要な記号の一つが&です。これは「親セレクタ（自分自身）」に置き換わります。

主に「擬似クラスの付与」や「クラス名の連結（BEM記法）」で威力を発揮します。

使用例：ホバー時のスタイル 通常、:hoverを書くためにクラス名を再記述しますが、&を使えばネストの中で完結します。

SCSS

// SCSS
.button {
background-color: blue;

// & は .button に置き換わる
&:hover {
background-color: darkblue;
}
}

コンパイル後のCSS

CSS

.button {
background-color: blue;
}
.button:hover {
background-color: darkblue;
}

このように、親クラス名（.button）が変わっても修正箇所が少なくて済むのが最大のメリットです。

2. , (カンマ) ：複数のセレクタをまとめて管理する

カンマはCSSと同様に「セレクタのグループ化」を行いますが、SCSSのネスト内で使うことで、

親要素の影響を受けた状態でグルーピングできます。共通のスタイルを一度に当てたい場合に便利です。

使用例：複数の子要素に同じスタイル

SCSS

// SCSS
.card {
padding: 20px;

// h2とpの両方に適用
h2, p {
margin: 0;
color: #333;
}
}

コンパイル後のCSS

CSS

.card {
padding: 20px;
}
.card h2,
.card p {
margin: 0;
color: #333;
}

3. 実践編：&と,を組み合わせた効率的な書き方

&と,を組み合わせると、「複数の状態」や「特定の条件下」でのスタイルを非常に簡潔に書くことができます。

実務で頻出のテクニックです。

使用例：ホバーとフォーカスを同時に指定 ボタンやリンクで、マウス操作（hover）とキーボード操作（focus）の両方に対応するスタイル定義です。

SCSS

// SCSS
.submit-btn {
background-color: #eee;

// 親要素が hover または focus された時
&:hover,
&:focus {
background-color: #ccc;
outline: none;
}
}

コンパイル後のCSS

CSS

.submit-btn {
background-color: #eee;
}
.submit-btn:hover,
.submit-btn:focus {
background-color: #ccc;
outline: none;
}

今回のまとめ