すべてのカテゴリ

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です。SCS

CSSを書いていると、よく出てくるのが Sass（サス） と SCSS（エスシーエスエス） という言葉です。名前が似ているので混乱しがちですが、結論から言うと SCSSはSassの書き方の一つ です。この記事では、「何が違うのか」「どちらを使えばいいのか」を整理して説明します。Sassとは何かSassは、CSSをより便利に書くための 拡張言語 です。CSSでは書けないような、次のようなことができます。変数を使って色やサイズを管理できる共通のスタイルをまとめて再利用できるファイルを分割して整理できる計算や条件分岐のような書き方ができるつまり、Sassは「CSSを効率よく、読みやすく、大規模に書くための仕組み」だと考えると分かりやすいです。SCSSとは何かSCSSは、Sassの中で最もよく使われている 記法（書き方） です。特徴はとてもシンプルで、CSSとほぼ同じ見た目で書けるという点にあります。そのため、既存のCSSをほぼそのまま移行できるCSSに慣れている人が違和感なく使えるチーム開発でも理解されやすいといったメリットがあります。現在、実務や学習の場面で「Sassを使う」と言われている場合、実際にはSCSSを使っているケースがほとんど です。sass（インデント記法）とは？一方で、拡張子が .sass の書き方も存在します。こちらは インデント記法 と呼ばれています。この書き方では、波括弧を使わないセミコロンを書かないインデント（字下げ）で構造を表すという特徴があります。記述量は少なくなりますが、インデントのミスが起きやすいCSSとの見た目の差が大きい初学者には少し分かりづらい