基本にして最重要のネストとは？

SASSを使うメリットの1つが、このネスト（入れ子）を使える点ですね！

ネストとは・・・。
言葉で説明してもピンとこないので、実際にコードを見てみましょう！

.contents {
    width: 1000px;
    margin: 0 auto;
}

.contents .title {
    font-size: 20rem;
    font-weight: bold;
}

例えば、「.contents」の配下にある「.title」にスタイルを指定したい場合CSSでは、このように書くと思います。

これをSASSで書くと・・・

.contets {
     width: 1000px;
     margin: 0 auto;
     .title {
         font-size: 20rem;
         font-weight: bold;
     }
 }

こんな感じになります！

お分かりいただけただろうか・・・。

「.contents」の中に「.title」が入っていると思います。（これが入れ子）
このネストを使うことで「.contents」を無駄に記述することが無くなるというメリットがあります。

また、「.title」の詳細度を下げたいときは、ネストを移動させるだけでOKです！

.contets {
     width: 1000px;
     margin: 0 auto;
 }
 .title {
     font-size: 20rem;
     font-weight: bold;
 } 

こんな感じ！

逆に詳細度を上げたい場合は、「.title」を任意のclassでネストしてあげましょう！
※出来る限り詳細度を上げない方がメンテナンス性が上がります。

.contets {
     width: 1000px;
     margin: 0 auto;
     .wrap {
         .title {
                 font-size: 20rem;
                 font-weight: bold;
         }
     }
 }

ちなみに、これがCSSに変換されると・・・

.contets {
     width: 1000px;
     margin: 0 auto;
 }
 .title {
     font-size: 20rem;
     font-weight: bold;
 }
 

こうなります。

「&」を使って超効率化

SASSでは「&」を使うことができます。
「&」を使うことで、親要素のセレクタ指定を引き継ぐことができます。

文章にしても分からないので実際に確認してみましょう！

.title {
    font-size: 20rem;
    font-weight: bold;
    &.red {
        color: #ef3431;
    }
}

例えば、こんな記述があるとします。
これをCSSに変換すると・・・

.title {
    font-size: 20rem;
    font-weight: bold;
}

.title.red {
    color: #ef3431;
}

「.red」の親要素のセレクタ指定である「.title」が引き継がれて「.title.red」になっています。
イメージとしては「&」の中に「.title」が入っているイメージですね。

注意しなければならないのが、「&」は全てのセレクタを引き継ぐという点です。
なので、以下のコードのように書くと・・・

.wrapper {
    .title {
        font-size: 20rem;
        font-weight: bold;
      &.red {
            color: #ef3431;
      }
    }
}

「.wrapper」もセットで引き継がれます。

.wrapper. title {
    font-size: 20rem;
    font-weight: bold;
}

.wrapper .title.red {
    color: #ef3431;
}

&で文字列の連結をしてみよう！

「&」はclass同士の連結だけではなく、文字の連結も出来ます！
たとえば、下のコードを見てみましょう！

.area {
    width: 300px;
    background: #fff;
    &-inner {
        padding: 10rem;
        font-size: 14rem;
    }
}

このコードをCSSに変換してみると・・・

.area {
    width: 300px;
    background: #fff;
}

.area-inner {
    padding: 10rem;
    font-size: 14rem;
}

こんな感じ。
「&」を使うことで「.area」が引き継がれて「-inner」と連結した流れになります。

覚えておくと便利！「@at-root」の使い方

ここまで、お疲れさまでした！
第２回は、これでラストになります！

最後に「@at-root」について学んでいきます！
実務でも使う機会は少ないけど、覚えておくと何かと便利なので紹介します！

「@at-root」は、ネストを無視してセレクタを指定できる記述です。
相変わらず意味不明なので、実際にコードを書いてみます！

まずは、「@at-root」を使わないパターン。

.wrapper {
    width: 1000px;
    margin: 0 auto;
    .title {
        font-size: 20rem;
        font-weight: bold;
        &.red {
            color: #ef3431;
        }
    }
}

みなさんが想像した通り、こんな感じに出てきます。

.wrapper {
    width: 1000px;
    margin: 0 auto;
}

.wrapper .title {
    font-size: 20rem;
    font-weight: bold;
}

.wrapper .title.red {
    color: #ef3431;
}

すべてに「.wrapper」が付いていますね。
しかし、CSSの詳細度の関係上、「.wrapper」を付けたくない時もありますよね。

そこで登場するのが、「@at-root」！！
では、実際に書いてみます。

.wrapper {
    width: 1000px;
    margin: 0 auto;
    @at-root .title {
        font-size: 20rem;
        font-weight: bold;
        &.red {
            color: #ef3431;
        }
    }
}

こんな感じでclass名の前に書いてあげればOKです。
これをCSSに直すと・・・

.wrapper {
    width: 1000px;
    margin: 0 auto;
}

.title {
    font-size: 20rem;
    font-weight: bold;
}

.title.red {
    color: #ef3431;
}

このように「@at-root」を書いたセレクタの配下は親要素の「.wrapper」が外れるようになります。

今回は以上になります！
最後までありがとうございました！！