【コーディング】CSSとSCSSの違い

フロントの実装をしてたら、CSSファイルの下に拡張子.SCSSのファイルがたくさん作られていて、何これ？ってなったから調べてみた。

SCSSとは

ざっくりいうと「CSSをより効率的に記述できる言語」のこと CSS言語自体を拡張して、機能を追加しているという、CSSの進化版みたいな感じ。

SASSとSCSSの違いに注意

ここで急にSASSという紛らわしいワードが登場。
SASSとSCSSは、記述方法が違うだけでほぼ同意。
CSSが進化してSASS( Syntactically Awesome StyleSheet )(直訳すると、構文的に素晴らしいスタイルシート)になり、その記述方法がSASSまたはSCSSになっているということらしい。拡張子はそれぞれ、.sass　.scss　が使われている。
Rubyっぽいインデント型のSASSの書き方と、CSSっぽい波カッコ型のSCSSの書き方では、後者の方が主流。

SCSSを使うメリット

入れ子構造や変数・関数を使って簡易化できるため、コード量が減る
ことによって
視認性も高まり、コードの保守管理がしやすくなる
人為的なミスを減らせるためバグが減る
コーディングをスピードが上がる

注意点としては、進化したSCSS(SASS)のままではブラウザでは認識されず使えないため、ソフトウェアを使ってCSSにコンパイルする必要がある。

SASS　インデント型の記述例

.btn
  display: block
  margin: 0 auto
  padding: 1em
  span
    display: inline-block

SCSS　記述例

.btn {
  display: block;
  margin: 0 auto;
  padding: 1em;
  span {
    display: inline-block;
  }
}

終わりに

関数や変数を使う場合や、コンパイルなどについてはこちらの記事が参考になりました。

https://officehojo.com/blog/2020/08/18/sass/

CSSファイルはたしかにぐちゃぐちゃになりがちで、繰り返し記述もしちゃってるため、SCSSを取り入れてリファクタリングしてこうと思った。なによりSCSSを使えるようになると効率的だし見やすいし良いことだらけということが今回よくわかった。