CSSとSassの違い

	概要	ブラウザでの扱い	再利用性
CSS	Webページの見た目（色・レイアウトなど）を指定するための言語	そのままブラウザで読み込める	クラスや共通CSSをコピーして再利用
Sass	CSSをより効率的に記述・管理するための拡張言語	ブラウザでは直接使えない。コンパイルしてCSSに変換する	mixinや@extendで部品化して再利用できる

CSS (Cascading Style Sheets)

Webページの見た目を指定するための言語です。

コード例

.button {
  color: white;
  background-color: blue;
}
.button:hover {
  background-color: navy;
}

Sass (Syntactically Awesome Stylesheets)

CSSを効率的に書けるようにした拡張言語です。

特に大規模なプロジェクトにおいてスタイルシートの記述と管理を大幅に改善できます。

使用にはコンパイルが必要です。

例

sass style.scss style.css

sassは、コンパイルするコマンドです。Saasをインストールすると使用できます。

style.scssは、Saasで書いた変換元のファイルです。

style.cssは、変換後の出力ファイルです。cssファイルになります。

コード例

$main-color: blue;

.button {
  color: white;
  background-color: $main-color;

  &:hover {
    background-color: darken($main-color, 10%);
  }
}

1. 変数 (Variables)

色、フォントサイズ、余白など、スタイルシート全体で共通して使用する値を定義し、一元管理できます。

メリット: デザインの変更が必要になった際に、変数の値を1箇所変更するだけで、関連するすべてのスタイルに反映できます。

例：$main-color: #3498db;

2. ネスト（入れ子） (Nesting)

HTMLの階層構造に合わせて、CSSセレクタを入れ子にして記述できます。

メリット: 親子関係が視覚的にわかりやすくなり、セレクタの記述を短縮できます。

例：.nav { ul { li { a { … } } } }

3. ミックスイン (Mixins)

再利用したい一連のスタイルをまとめて定義し、必要な場所で呼び出して使用できます。

メリット: コードの重複を減らし、メンテナンス性を向上させます。

例：@mixin center { display:flex; justify-content:center; }

4. 継承 (Extend)

あるセレクタで定義されたスタイルを、別のセレクタに引き継ぐことができます。

メリット: スタイルの共通化を図り、コンパイル後のCSSを効率化できます。

例：.btn-primary { @extend .btn; }

5.演算

数値や色を計算できます。

例：width: (100% / 3); や color: lighten($main-color, 10%)

Sassの記法について

Sassには主に2種類の記法があります。

SCSS (Sassy CSS)

拡張子は .scss。

CSSとほぼ同じ構文（波括弧 {} とセミコロン ; を使用）で記述できるため、CSSに慣れている人にとって学習コストが低く、現在の主流です。

Sass

拡張子は .sass。

波括弧 {} とセミコロン ;を省略し、インデント（字下げ）によって階層構造を表現する、より簡略化された記法です。