基本にして最重要のネストとは?
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」の使い方
ここまで、お疲れさまでした!
第2回は、これでラストになります!
最後に「@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」が外れるようになります。
今回は以上になります!
最後までありがとうございました!!