サーチ…
基本ネスト
新しいルールを別のルールの中に宣言すると、常にネストと呼ばれます。基本的なネスティングでは、以下に示すように、ネストされたセレクタは、すべての親が先頭に追加され、スペースで区切られた新しいCSSセレクタとしてコンパイルされます。
// SCSS
.parent {
margin: 1rem;
.child {
float: left;
}
}
// CSS output
.parent {
margin: 1rem;
}
.parent .child {
float: left;
}
ネスティングの深さ
ネスティングは非常に強力な機能ですが、慎重に使用する必要があります。あなたは巣の中、巣の、巣の中のすべての子供たちを入れ子にして持ち始めます。私に実証させてください：
// SCSS
header {
// [css-rules]
.holder {
// [css-rules]
.dropdown-list {
// [css-rules]
ul {
// [css-rules]
li {
margin: 1rem 0 0 1rem;
}
}
}
}
}
// CSS output of the last rule
header .holder .dropdown-list ul li {
margin: 1rem 0 0 1rem;
}
問題
特異性
上記の例のliはmargin設定されています。後でメディアクエリでこれを上書きしたいとしましょう。
@media (max-width: 480) {
// will not work
.dropdown-list ul li {
margin: 0;
}
// will work
header .holder .dropdown-list ul li {
margin: 0;
}
}
したがって、入れ子にしすぎると結果的に一定の値を上書きしたいときはいつでも深く入れ子にする必要があります。さらに悪いことに、これはしばしばルール!importantが使われる場所です。
@media (max-width: 480) {
// BIG NO-NO, don't do this
.dropdown-list ul li {
margin: 0 !important;
}
なぜ!importantの!importantか？それは悪い考えです
これらの回避策は最初から必要ではないという点でSCSSを書くべきです。このようなマイナーな問題に!importantを使用すると、ウサギの穴ができます！
再利用性
これは特異性の問題にかなり似ていますが、別途指摘する価値があります。ボタンやドロップダウンなどのスタイルを設定している場合は、そのスタイルをページ上の別の場所に再利用することができます。
ネストを深くすると、あなたのスタイルは最も外側の親（SCSSの上部にある要素）の内側にある要素にのみバインドされます。これにより、スタイルをコピーして別の場所に貼り付けることができます。他のネストされたルールの可能性があります。
あなたのスタイルシートはますます大きくなり、メンテナンスが難しくなります。
あなたはどのくらい深く巣を置くべきですか？
ほとんどのスタイルガイドでは最大深度が2に設定されています。これは一般的には良いアドバイスです。深いネストを望む機会はごくわずかです。ほとんどの場合、2で十分です。
@ at-rootでネストする
より具体的なセレクタを作成するためにネストするのが最も一般的ですが、単にコードの編成にも使用できます。 @at-rootディレクティブを使用すると、あなたのSassにネストした場所から「飛び出す」ことができ、トップレベルに戻ることができます。そうすることで、必要以上に特殊性を作り出すことなく、スタイルをグループ化したままにすることができます。
たとえば、次のようなことができます。
.item {
color: #333;
@at-root {
.item-wrapper {
color: #666;
img {
width: 100%;
}
}
}
.item-child {
background-color: #555;
}
}
これは次のようにコンパイルされます。
.item {
color: #333;
}
.item-wrapper {
color: #666;
}
.item-wrapper img {
width: 100%;
}
.item .item-child {
background-color: #555;
}
これにより、 .itemクラスに関連するすべてのスタイルがSCSSにまとめられますが、必ずしもすべてのセレクタでそのクラスが必要というわけではありません。
コンテキストを除外
デフォルトでは、 @at-root内の宣言はどのようなコンテキストにも現れます。つまり、たとえば@mediaブロック内のルールはそこに残ります。
@media print {
.item-wrapper {
@at-root {
.item {
background: white;
}
}
}
}
// Will compile to
@media print {
.item {
background: white;
}
}
これは常に望ましい動作ではありませんので、 @at-rootディレクティブのオプションwithout mediaを渡すことで、メディアコンテキストを除外できます。
@at-root (without: media) {..
詳細については、 公式ドキュメントを参照してください。
親セレクタ（＆）は、
関連するセレクタをまとめておくことで、将来の開発者がコードを理解しやすくなります。アンパサンド（ "＆"）で表される親セレクタは、より複雑な状況でそれを行うのに役立ちます。その使用方法はいくつかあります。
新しいセレクターを作成するには、親セレクターの後に直接新しいセレクターを配置して、親セレクターと別のセレクターの両方を必要とするセレクターを作成します。
// SCSS
.parent {
&.skin {
background: pink;
}
}
// CSS output
.parent.skin {
background: pink;
}
ネストされたセレクタの後に親セレクタを置くことによって、コンパイルされたCSSのネストされたセレクタの後に親を表示させます。
// SCSS
.parent {
.wrapper & {
border: 1px solid black;
}
}
// CSS output
.wrapper .parent {
border: 1px solid black;
}
状態と疑似要素
クラスと子にネストを使用することに加えて、親セレクタをネストすることは、リンクの状態:active 、 :hover 、 :focusの状態を結合するためにもよく使用されます。
// SCSS
a {
color: blue;
&:active,
&:focus {
color: red;
}
&:visited {
color: purple;
}
}
// CSS output
a {
color: blue;
}
a:active,
a:focus {
color: red;
}
a:visited {
color: purple;
}
同様に、親セレクタをネストして擬似要素をスタイルすることもできます。
// SCSS
.parent {
&::after {
display: table;
clear: both;
content: '';
}
&::only-child {
font-weight: bold;
}
}
// CSS output
.parent::after {
display: table;
clear: both;
content: '';
}
.parent::only-child {
font-weight: bold;
}
ネスティングプロパティ
一部のCSSプロパティは名前空間に属しています。たとえば、 border-rightはborder名前空間に属しています。少ない文字を書くために、プロパティネストを利用して、複数のレベルであってもこれらの接頭辞をスキップできます。
.bordersという名前のクラスの右と左に境界線を作成する必要がある場合は、次のように書くことができます。
//SCSS
.borders {
border: 2px dashed blue;
border: {
left: 1px solid black;
right: 1px solid red;
}
}
// CSS output
.borders {
border: 2px dashed blue;
border-left: 1px solid black;
border-right: 1px solid red;
}
border-rightとborder-left border-rightを書く必要はありませんが、 1px solid red 1px solid blackと1px solid red線で繰り返しコードを書いています。私たちはfolowingでより少ない繰り返しCSSを書くことができます：
// SCSS
.borders {
border: 2px dashed blue {
left: 1px solid black;
right: {
color: red;
}
}
}
// CSS output
.borders {
border: 2px dashed blue;
border-left: 1px solid black;
border-right-color: red;
}