公開日:2021/1/21 最終更新日:2022/08/26

SCSSについて考える

カテゴリー: CSS HTML SCSS

※この記事は文章を書く練習も兼ねられています。

SCSSって便利ですよね。

・入れ子構造が利用できる
・変数が使える
・コードのテンプレートを作れる(@mixin)
・スタイルシートを複数枚に分割できる

これだけの事が出来るんですよ。

入れ子構造と変数、@mixinが利用できてスタイルシートを分割できるのはとても便利です。特に@mixinが利用できることとスタイルシートを分割出来ること


@mixinが使うことで大量のCSSを書かずに@includeだけで済みます。ボタンや入力フォームのスタイルも@includeだけで統一することが出来ます。更にスタイルを変更したければ@mixinの中を書き換えるだけで@includeを使用した属性のスタイルを一括で変更できます

スタイルシートを分割することが出来るとメンテナンス性がとても高くなります。CSSは書いているとだんだん長くなっていき、修正箇所を探すことが困難になります。SCSSでは入れ子構造が利用出来るのでとても長くなることは少なくなりますが、それでも長くなる時は長くなってしまいます。そこで便利なのがスタイルシートの分割機能。headerやmain、footer毎にSCSSを別々に記述することでそのようなリスクを回避できます


こうやって文章に起こしているとSCSSの凄さを改めて感じました。
SCSSも完璧に使いこなせるよう練習しておこうと思います。