WEBエンジニアにとって必須となってくる知識のHTML、CSS。
学習コストも少なく、1日触ってみるだけで誰でも簡単にWebサイトが作れてしまう言語。
しかし、学習コストが少ないと言っても奥はかなり深い言語となり、表面だけを理解してもなかなかクオリティや作業効率が上がりません。
そこで、今回は知っておくとサイトの保守性や作業スピードが爆上がりするSCSS（SASS）についてご紹介いたします。
CSSとSCSSの記述の違い
まずはCSSとSCSSの記述の違いから見ていきましょう
このようなHTML記述があったとします。
<body>
<div>
<p class="text1"><span>Hello</span> World!</p>
</div>
<p class="text2">Hello World!</p>
</body>
div要素に白の背景色、text1要素に黒文字、16px、span要素に赤文字、text2要素に赤文字を設定する場合次のようなCSSになります。
div {
background-color: white;
}
div .text1 {
color: black;
font-size: 16px;
}
div .text1 span {
color: red;
}
.text2 {
color: red;
}
これをSCSSに直すと・・・
div {
background-color: white;
.text1 {
color: black;
font-size: 16px;
span {
color: red;
}
}
}
.text2 {
color: red;
}
これを出力すると最初に書いたCSSと同じ効果が反映されます。
CSSを記載する時に他に影響を与えない保守性を上げるコーディングをしようとすると、同じクラス名を何度も書く事になる上、要素の指定の記述が非常に長くなります。
また行も非常に長くなる為、コードが長くなると目的のコードを探すためにひたすらスクロールをしなければなりません。これが地味に疲れます・・・
SCSSで記述することにより
・同じスタイルを繰り返さなくていいので記述量が明らかに減る。
・ネスト構造を利用できるのでコードが見やすい
・モジュール化ができるので管理がしやすい
・ユーマンエラーやバグが減る
このようなメリットがあります。
逆にデメリットもあります。
・学習するまでに時間がかかる
・コンパイルが必要となる
・ファイル数が多くなりがち
・ネスト構造が深くなりすぎる
これらのデメリットを加味してもメリットの方が高いので是非SCSSを習得しましょう！
SCSSとSASSの記述の違い
SCSSと似たものにSASSというものがあります。
SCSSと検索をするとこのSASSが引っかかる事が多いのですが私はSCSSの記述の方が分かりやすくて好きです。
具体的な違いは・・・
div {
background-color: white;
.text1 {
color: black;
font-size: 16px;
span {
color: red;
}
}
}
.text2 {
color: red;
}
先ほどのSCSSのコードをSASSに直すと
div
background-color: white
.text1
color: black
font-size: 16px
span
color: red
.text2
color: red
の形になります。
波括弧やセミコロンを付けなくて良くなるので更に記述量が減るのですが
私はスタイルを付けるときはコロンとセミコロンを付けるのはセットになってますのであまりメリットには感じないかな？と思います。
更に波括弧が無くなることによって少し見にくくなる感じがして私はSASSは使用しません。
まとめ
コーディングには様々な記述方法があり、正解は無いと思います。
好みはそれぞれあると思いますので、作業スピード、クオリティを担保できる手法で作業をするのが一番でございます。
但し、チームで開発をする時はコーディングルールもあると思いますのでしっかりルールに則ってより良い制作活動をしていきましょう！
