SCSS（エスシーエスエス）とは、CSSをより便利で効率的に書くための拡張言語です。
正式には「Sassy CSS」と呼ばれ、CSSの記法をそのまま使いながら、開発を楽にするための機能を追加できます。
見た目はCSSとほぼ同じですが、変数やファイル分割など、CSSにはない便利な仕組みを使えるのが大きな特徴です。
なぜSCSSが使われるのか
WebサイトやLPがシンプルなうちはCSSだけでも問題ありません。
しかし、ページ数が増えたり、デザインが複雑になると、CSSは管理が大変になっていきます。
SCSSを使うことで、
・同じ色や余白を何度も書かなくて済む
・ファイルを分けて整理できる
・修正が発生したときに影響範囲を最小限にできる
といったメリットが生まれます。
そのため、実務やチーム開発ではSCSSがよく使われています。
SCSSでできること
SCSSでは、CSSではできない、またはやりにくいことが簡単に書けます。
代表的なものとして、色やフォントサイズをまとめて管理できる仕組みがあります。
デザイン全体で使う色や余白を一箇所にまとめておくことで、修正が一瞬で終わるようになります。
また、スタイルを意味ごとに分けて管理できるため、
「どこに何が書いてあるかわからないCSS」になりにくいのも特徴です。
SCSSとCSSの関係
SCSSは、最終的にCSSに変換して使います。
ブラウザはSCSSを直接読み込めないため、開発時にSCSSを書き、ビルド時にCSSへ変換します。
そのため、ユーザーが見るページ自体は、通常のCSSと何も変わりません。
あくまで「開発者が書きやすく、管理しやすくするための仕組み」がSCSSです。
SCSSはどんな人に向いているか
SCSSは、
・サイト制作を仕事にしたい人
・ページ数が多いサイトを作る人
・デザインの修正が頻繁に発生する人
に特に向いています。
一方で、HTMLとCSSを学び始めたばかりの段階では、無理に使う必要はありません。
まずはCSSの基本を理解した上で、「管理が大変になってきた」と感じたタイミングでSCSSを導入するのがおすすめです。
まとめ
SCSSは、CSSをより書きやすく、管理しやすくするための拡張言語です。
見た目はCSSとほぼ同じなので、CSSの知識があれば比較的スムーズに導入できます。
小さなサイトでは必須ではありませんが、
規模が大きくなるほど、その便利さを実感できるのがSCSSの強みです。
CSSに慣れてきたら、次のステップとしてぜひ触れてみてください。
