Sassの便利な親セレクタの参照「&:アンパサンド(アンド )」の使い方

Sassの&(アンパサンド)は、基本的に「親セレクタを参照」できる機能。

親セレクタの参照とは、「ネスト(入れ子)機能」を使って書いた場合「1階層上のセレクタ」をそのままコピーするように、コンパイル後のCSSで記述してくれる機能

通常のCSSの場合

たとえば、通常のCSSで以下のように、グローバルナビのCSSを書いていて「トップページだけはデザインの都合上、背景色を変えて表現したい!」なんて事もある。

通常のCSS

#gnav {

background:#eee;

}

body.top #gnav {

background:#000;

color:#fff;

}

#gnav ul li{

list-style:none;

}

ネストを使っただけのSassの場合

上記のCSSを、ネスト機能だけをつかったSassの場合は次のように記述する。

ネスト機能だけを使ったSass

#gnav {

background:#eee;

ul li{

list-style:none;

}

}

body.top #gnav {

background:#000;

color:#fff;

「&(アンパサンド)」を使ってネストさせたSassの場合

上記の記述を「&(アンパサンド)」を使えば、ネストの中で記述することができるので、記述が増えても可読性が保たれる!

「&(アンパサンド)」を使ってネストさせたSass

#gnav {

background:#eee;

body.top & {

background:#000;

color:#fff;

}

ul li{

list-style:none;

}

}

「&(アンパサンド)」をつかった擬似クラスの例

a {

color:#f90;

text-decoration: none;

&:hover {

text-decoration: underline;

}

}

コンパイル後のCSS

a {

color:#f90;

text-decoration: none;

}

a:hover{

text-decoration: underline;

}

やはりWEBの学習は「基礎」が一番重要!「時間をかけてしっかり」と基礎を固める事で、実際の仕事の案件の時に「基礎がしっかりしている」と、そこから応用が効いて、たいていの問題は解決するので、不安にならずに済む。
Sassのややこしい機能まとめ

Follow me!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です