ワイ「ありゃ、SCSSの親セレクタが効かへんで？」について

## 休日ワイ
ワイ「最近、お仕事で**SCSS**を書くことが多いから、そのお勉強でもしよか」
ワイ「会社の若い子らに負けんようにな」

娘（3歳）「パパ、お仕事のお勉強？」

ワイ「せや」

娘「パパのお仕事ってなあに？」

ワイ「パパのお仕事はな」
ワイ「**フロントエンドエンジニア**や」
ワイ「今年の2月までは**ライフエンドエンジニア**、つまり**無職**やったんやけど」
ワイ「3月からはバリバリお仕事がんばってるで」

娘「えらいね、パパ」

ワイ「ありがとうな」
ワイ「でも、今の職場には若くて優秀な子らが多くてな」
ワイ「まだパパはあんまり活躍できてへんねん」
ワイ「若者たちに嫉妬しすぎて、**ダークサイドエンジニア**になりそうや」

よめ太郎「（なんや**ダークサイドエンジニア**て）」
よめ太郎「（**サーバーサイド**みたいに言うなや）」

娘「そうなの？」

ワイ「ちょっとな」
ワイ「でも、若者たちに開発スピードで負けへんように！とか思いすぎて」
ワイ「テストをすっ飛ばしてコミットするような**オフサイドエンジニア**にだけはなったらアカンから」
ワイ「地道にお勉強して頑張って行くしかないわ」
ワイ「せやから、今日はSCSSのお勉強や」

## SCSSとは
娘「ところでパパ、**SCSS**ってなあに？」

ワイ「CSSを**楽に高速に**書ける、超絶便利なやつや」
ワイ「例えばやな───」

```html:HTML
<ul class="example-list">
  <li class="item">テキスト</li>
  <li class="item">テキスト</li>
  <li class="item">テキスト</li>
</ul>
```

ワイ「HTMLの中に↑こういうリストがあったとして」
ワイ「`.example-list`の背景色を`green`にしたかったら」

```css:CSS
.example-list {
  background-color: green;
}
```

ワイ「↑こんな感じでCSS書くやろ？」
ワイ「それで更に`.example-list`の中の`.item`にボーダーを付けたかったら」

```css:CSS
.example-list {
  background-color: green;
}

.example-list .item {
  border: 1px solid;
}
```

ワイ「↑こんな風に`.example-list .item`っていうセレクタを書かなあかんやろ？」
ワイ「それが**SCSS**記法で書くと───」

```scss:SCSS
.example-list {
  background-color: green;
  .item {
    border: 1px solid;
  }
}
```

ワイ「↑こう、**入れ子にして**書けるんや」
ワイ「`.example-list`を何度も書かんでええわけやな」
ワイ「更に、`.item`の中に`a`タグがあったりした場合でも」

```scss:SCSS
.example-list {
  background-color: green;
  .item {
    border: 1px solid;
    a {
      font-weight: bold;
    }
  }
}
```

ワイ「↑こうやって、どんどんネストして書いてやれば」

```css:CSS
.example-list {
  background-color: green;
}

.example-list .item {
  border: 1px solid;
}

.example-list .item a {
  font-weight: bold;
}
```

ワイ「↑こういうCSSに**トランスパイル**・・・つまり**変換**してくれんねや」

娘「たしかに、とっても楽チンだね」

ワイ「せやねん」
ワイ「もし`.example-list`っていうクラス名を
変更することになった場合も」
ワイ「1箇所なおすだけやしな」
ワイ「他にもドチャクソ便利な機能がいっぱいあるらしいで」

娘「ふ〜ん」
娘「すごいね」
娘「じゃあさ、パパ」
娘「`a:hover`とかも───」

```scss:SCSS
a {
  :hover {
    opacity: .7;
  }
}
```

娘「───って書けるの？」

ワイ「いや、その書き方やと」

```css:CSS
a :hover {
  opacity: .7;
}
```

ワイ「↑こう変換されてしまうんや」

娘「`a`と`:hover`の間に半角スペースが入っちゃったね」

ワイ「せやねん」
ワイ「セレクタをネストすると、**`a`の中の`:hover`**って意味になってまうねん」

娘「そっか」

ワイ「`a:hover`にしたい場合はこうや」

```scss:SCSS
a {
  &:hover {
    opacity: .7;
  }
}
```

娘「`&`を使うんだね」

ワイ「せや」
ワイ「`&`は**親セレクタ**言うやつで」
ワイ「**1つ外側のセレクタ**を参照する**変数**みたいなもんやねん」
ワイ「つまり、上の例では`&`は`a`を示してるわけやな」

娘「そっかー」
娘「でもさ、パパ」
娘「普通にネストして書くと半角スペースが入って`a :hover`になっちゃうところが」
娘「`&`を使うと`a:hover`になる・・・ってことは」
娘「`&`には、**半角スペースを消してくっつけてくれる**効果があるとも言えるよね」

ワイ「さすが娘ちゃんやな」
ワイ「その通りや」
ワイ「せやから`&`は**BEM**書くときにも便利やで」
ワイ「例えば───」

```html:HTML
<ul class="example-list">
  <li class="example-list__item">テキスト</li>
  <li class="example-list__item">テキスト</li>
  <li class="example-list__item">テキスト</li>
</ul>
```

ワイ「↑こんな感じで、BEMの命名規則にしたがって長いクラス名になってしまっても」

```scss:SCSS
.example-list {
  background-color: green;
  &__item {
    border: 1px solid;
  }
}
```

ワイ「↑こういう風にネストして、**短くシンプルに**書けるんや」
ワイ「普通のCSSやったら↓こうやで」

```css:CSS
.example-list {
  background-color: green;
}

.example-list__item {
  border: 1px solid;
}
```

娘「SCSSの方がだいぶシンプルに書けて良さそうだね」

ワイ「せや」
ワイ「`&`はめっちゃ便利やねん」
ワイ「でもな・・・」

## 親セレクタ`&`の注意点

ワイ「`&`は若干、挙動が**直感的やない**ところがあんねん」
ワイ「例えば───」

```html:HTML
<ul class="example-list">
  <li class="item">テキスト</li>
  <li class="item">テキスト</li>
  <li class="item">テキスト</li>
  <li class="item">テキスト</li>
  <li class="item">テキスト</li>
</ul>
```

ワイ「HTMLの中に↑こういう要素があったとして」
ワイ「**2個目以降の`.item`にだけ**`margin-top`をつけたい」
ワイ「そんなときってあるやん？」

娘「割とあるかも」

よめ太郎「（いや**3歳児には無いやろ**）」

ワイ「そんなときは**隣接セレクタ**、つまり`+`を使って」
ワイ「`.item`の次の`.item`に`margin-top`をつける」
ワイ「って感じで書けば、先頭の`.item`には適用されずに」
ワイ「**2個目以降の`.item`**にだけ`margin-top`をつけられるんや」
ワイ「つまり、普通のCSSで書くとこういうやつやな」

```css:CSS
.example-list .item + .item {
  margin-top: 20px;
}
```

ワイ「これをSCSSで書こうとして」
ワイ「`.item`の次の`.item`やから」

```scss:SCSS
.example-list {
  .item {
    & + & {
      margin-top: 20px;
    }
  }
}
```

ワイ「↑こう書いてしまいたくなるんやけど」
ワイ「この書き方やと」

```css:CSS
.example-list .item + .example-list .item {
  margin-top: 20px;
}
```

ワイ「↑こういうCSSに変換されてしまうんや」
ワイ「`.example-list .item + .item`になって欲しかったところが」
ワイ「`.example-list .item + .example-list .item`になってまうわけやな」

娘「えっと、つまり」
娘「`&`は1つ外側のセレクタを指す物だから`.item`が入ってると思いきや」
娘「`.example-list .item`が入ってた・・・」
娘「親の親も含んでたってことだね」

ワイ「せやな」
ワイ「せやから、今回のケースでは親セレクタは使えなくて」

```scss:SCSS
.example-list {
  .item + .item {
    margin-top: 20px;
  }
}
```

ワイ「↑こう書くか、もしくは」

```scss:SCSS
.example-list {
  .item {
    + .item {
      margin-top: 20px;
    }
  }
}
```

ワイ「↑こうやな」
ワイ「そうすると・・・」

```css:CSS
.example-list .item + .item {
  margin-top: 20px;
}
```

ワイ「ちゃんと↑こう変換されるんや」

娘「ふーん」
娘「なんか、**親って使えないんだね〜**」

ワイ「（**ん？ワイの事か？**）」

娘「`.item + .item`でいいじゃん」
娘「わざわざ`& + &`にする意味あるの？」

ワイ「（**よかった、SCSSの話や**）」
ワイ「`.item`っていうクラス名を2回書くよりも」
ワイ「`&`で変数っぽくしておいた方が、修正が発生した場合に楽やで」
ワイ「もし`.item`っていうクラス名が変わったときに」
ワイ「クラス名を1箇所なおすだけで」
ワイ「`&`の中身も一緒に変わってくれるやん？」
ワイ「同じものを何度も書くよりも、変数化する・・・」
ワイ「そこは**アレ**と一緒や」

娘「アレって？」

ワイ「ええと、**アレ**や。**アレ**・・・」

娘「もしかして、**プログラミング？**」

ワイ「それや！」

よめ太郎「（**プログラミングが出てけぇへんかったんかい**）」
よめ太郎「（本格的に脳腐って来てるやん・・・）」

## BEMのネストなら`&`も使いやすい

ワイ「BEMの場合は`& + &`も使いやすいで」
ワイ「BEMで書く場合、基本的に**長〜い1つのクラス名**になるから」
ワイ「親の親、とか気にしないで済むねん」

娘「？？？」
娘「どういうこと？」

ワイ「つまりやな」
ワイ「さっきみたいに`+`を使って」

```scss:SCSS
.example-list {
  &__item {
    & + & {
      margin-top: 20px;
    }
  }
}
```

ワイ「↑こう`& + &`って書いたとしても」
ワイ「親と子のクラス名が**全部繋がっていれば**」

```css:CSS
.example-list__item + .example-list__item {
  margin-top: 20px;
}
```

ワイ「↑こう、想定通りの挙動になるわけや」

娘「ほんとだ・・・！」
娘「**親も上手く使えば便利**ってことだね」

ワイ「（さっきから**語弊がエグい**で・・・！）」

# こんな`&`の使い方も

ワイ「ほかにもな」
ワイ「例えばこんな書き方もできんねや」

```scss:SCSS
.example-list {
  .item {
    body.top-page & {
      margin-top: 20px;
    }
  }
}
```

娘「`body`が`.item`の中に入っちゃってるよ？」

ワイ「そう見えるやろ？」
ワイ「でもこれは**↓こう変換**されんねん」

```css:CSS
body.top-page .example-list .item {
  margin-top: 20px;
}
```

ワイ「`body`要素に`top-page`っていうクラスが付いてた場合のみ」
ワイ「`.example-list`の中の`.item`に特定のスタイルをあてる」
ワイ「っていうことやな」

娘「`&`には`.example-list .item`が入ってる感じだから」
娘「`body.top-page &`は」
娘「`body.top-page .example-list .item`に変換されるんだね」
娘「使いこなしたら便利そう・・・！」

ワイ「せやで〜」

## そんなこんなで晩ご飯タイム
娘「パパ、SCSSの事いろいろ知ってるんだね」

ワイ「いや・・・実はな・・・」
ワイ「さっきの知識も、会社の若い子に教えてもろてん」
ワイ「いっつも若い子らに教えてもらってばっかりで」
ワイ「なかなか追いつけなくて」
ワイ「ホンマ凹むわ・・・」
ワイ「若くて優秀な奴らが羨ましいで・・・」
ワイ「むしろ憎いで・・・」
ワイ「そして、そんな風に思う自分が嫌になるで・・・」

娘（**3歳**）「パパ」
娘「分かるよ」

ワイ「（**分かんの！？**）」
ワイ「（自分が一番若いやん）」
ワイ「（っていうか**幼児やん**）」

娘（**3歳**）「私も昔は、よく友達に嫉妬してた」
娘「それで、その子をやっかんだりしてた」

ワイ「（**昔て**）」
ワイ「（それもう**前世とかやん**）」

娘「でも最近は・・・」
娘「**人に嫉妬したら、自分を磨くようにしてる**」
娘「**満足できる自分になって、嫉妬を忘れたいから**」

ワイ「娘ちゃん・・・！」
ワイ「さすがに**悟りすぎやろ！！！**」

**〜おしまい〜**