SassとSCSSとは
Sassは、CSSをより効率よく書くための拡張機能を備えた仕組み（CSSプリプロセッサ）です。変数や入れ子、再利用できるまとまりなどを使えるようになり、保守しやすいスタイルを書けます。
SCSSはSassの記法の一つで、通常のCSSとよく似た書き方ができるのが特徴です。現在はこのSCSS記法が広く使われています。
2つの記法の違い
Sassには大きく分けて2つの記法があります。古くからあるインデント記法（.sass）と、CSSに近い波かっことセミコロンを使う記法（.scss）です。
SCSS記法は既存のCSSをそのまま貼り付けても基本的に動くため、CSSに慣れた人が移行しやすい点が魅力です。どちらを選んでも内部の機能はほぼ共通です。
実務ではどこで関係する？
Sassは言葉の意味だけ覚えても、HTML共有の判断にはつながりません。実務では「表示に関係する話か」「検索に関係する話か」「アクセス制限に関係する話か」を分けて考えると整理しやすくなります。
Sass・SCSSについて迷ったら、相手が安全に開けるか、検索に出してよいか、ブラウザや環境差で壊れないかを順番に確認します。用語理解は、その判断を早くするための道具として使います。手順が決まったら、HTML/ZIPをアップロードして共有URLを発行し、相手に確認してほしい観点と期限を添えて送ります。
- 表示の話: HTML/CSS/JS、パス、ブラウザ互換性を確認する
- 検索の話: noindex、canonical、sitemap、robots.txtの役割を分ける
- 制限の話: URL共有、パスワード、メール認証、会社ドメイン認証を混同しない
- 運用の話: 期限、差し替え、削除、共有メッセージまで決める
代表的な便利機能
SassやSCSSが支持される理由は、繰り返しや管理の手間を減らす機能にあります。代表的なものを押さえておきましょう。
- 変数：色や余白などをまとめて管理し、一括で変更できる
- ネスト：入れ子で書くことで、セレクタの親子関係を見やすくする
- ミックスイン：よく使うスタイルのまとまりを定義して再利用する
- パーシャルとインポート：ファイルを分割して整理し、まとめて読み込む
コンパイルが必要な理由
ブラウザはSassやSCSSをそのまま解釈できません。そのため、SassやSCSSのコードは通常のCSSへ変換（コンパイル）してから配信します。
この変換は専用のツールやビルド環境が担います。便利な記法で書いた内容が、最終的にはブラウザが読める純粋なCSSになる、という流れを押さえておきましょう。
使うときの注意点
ネストは便利ですが、深くしすぎるとセレクタが複雑になり、かえって読みにくくなることがあります。適度な深さに保つのがコツです。
また、近年は標準のCSS自体にも変数（カスタムプロパティ）やネストが導入されつつあります。プロジェクトの要件に応じて、Sassを使うか標準CSSで足りるかを見極めるとよいでしょう。
コンパイル後の見た目を共有するには
SCSSで整えたスタイルが意図通りに表示されるかは、コンパイル後のCSSを適用した状態でブラウザを開いて確認するのが確実です。実際の画面を関係者に見てもらうと、デザインの認識合わせが進みます。
コンパイル後のCSSや画像を含むサイトを一時的に共有したいときは、ギガサイト便のようにZIPをドロップして認証付きの一時URLを発行できるサービスを使うと、手軽にレビューを依頼できます。
よくある質問
SassとSCSSはどちらを使えばよいですか？
現在はCSSに近いSCSS記法が広く使われています。CSSに慣れている場合は、移行しやすいSCSSから始めるのがおすすめです。
Sassを使うとブラウザでそのまま動きますか？
そのままでは動きません。通常のCSSへコンパイルしてから配信する必要があります。変換はビルドツールなどが担います。
標準CSSの進化でSassは不要になりますか？
標準CSSにも変数やネストが入りつつありますが、ミックスインなどSass独自の機能もあります。要件に応じて使い分けるとよいでしょう。
ネストはどこまで深くしてよいですか？
明確な決まりはありませんが、深くしすぎると可読性や保守性が下がります。必要以上に入れ子にしないことが推奨されます。
実務ではどこで関係する？はHTML共有で必ず理解しておく必要がありますか？
細かな仕様を暗記する必要はありません。ただし、検索に出るか、閲覧者を制限できるか、表示が崩れないかに関わる用語は、共有前の判断材料として押さえておくと安全です。