SCSSが使えるようになりコーディング速度、保守性が爆上がりした件についてテンションが上がっている私ですが前回は主にメリットについて述べて参りました。
後編では実際の書き方や導入方法についてご紹介していきたいと思います。
SASS/SCSSの書き方
まずはファイルを作りましょう。
前編でもあったようにSASSとSCSSではすこし記述方法が違います。
SASS記法はセミコロンや波括弧を使用しないのでコードが簡略化され、負担は少なくなりますがコードが読みづらくなるというデメリットがあります。
ファイル名の後に.sassを付けることによりSASS記法での記述が可能です。
一方SCSS記法は書き方がCSSに似ておりCSSを触れる方ならあまり学習コストがかからないというメリットがあります。
ファイル名の後に.scssを付けることによりSCSS記法での記述が可能です。
SCSSのメリット：入れ子の使用が可能
さてSCSSの入れ子とはどういう物か？実際にコードで確認してみましょう
<div class="wrapper">
<div class="content1">
<h2 class="content1__h2">
content1のh2です
</h2>
<p classs="content1__p">
content1のpです
</p>
</div>
<div class="content2">
<h2 class="content2__h2">
content2のh2です
</h2>
<p classs="content2__p">
content1のpです
</p>
</div>
</div>
.wrapper {
margin: 0 auto;
}
.wrapper .content1 {
background: red;
}
.wrapper .content1__h2 {
font-size: 20px;
}
.wrapper .content1__p {
font-size: 16px;
}
.wrapper .content2 {
background: blue;
}
.wrapper .content2__h2 {
font-size: 24px;
}
.wrapper .content2__p {
font-size: 18px;
}
上記のようなHTMLとCSSがあるとします。
問題なのはCSSの.wrapper .conetnt1等同じコードを何回も書いているので
これが膨大なCSSの量になってくると圧倒的に見通しが悪くなりますし気づいたら他にも同じスタイルを当てていて一ヵ所を変更すると他のスタイルにも影響してしまう原因にもなります。
上記のCSSをSCSSに直したのが下記のコードです。
.wrapper {
margin: 0 auto;
.content1 {
background: red;
&__h2 {
font-size: 20px;
}
&__p {
font-size: 16px;
}
}
.content2 {
background: blue;
&__h2 {
font-size: 24px;
}
&__p {
font-size: 18px;
}
}
}
慣れない内は少し癖があるかと思いますが
重要な点は入れ子にすることにより勝手に親のクラスが当たったCSSが出力されるという点です。
これにより重複防止の為に長いクラス名を書かなくてもよいですしクラス名をチェーンさせても全てのクラスを書かなくていいので圧倒的にタイピング量が少なくなりコーディング速度が爆速になるということですね。
もう一点は&を使っているということ
&を使うことにより
.hoge {
margin: 0 auto;
}
.hoge__hogehoge {
background: red;
}
のようなコードを
.hoge {
margin: 0 auto;
&__hogehoge {
background: red;
}
}
にすることにより毎回親クラスの.hogeを記述しなくて済むということになります。
そして上記のコードを見てもらうとBEM記法との相性も抜群なのですね！
というようにメリット1だけでもSCSSを使わない手はないぐらいに目白押しでした。
後編第2弾では変数の利用方法をお届けいたします。
