第5回: Sass（SCSS）でコーディングを高速化する

Sass（SCSS）とは？

Sassとは何か？

CSSを効率よく書くための拡張言語

→CSSを書くのを楽にする道具

CSSのよくある問題

• 同じ値を何度も書く
• セレクタが長くなる
• 管理が難しくなる

実例

.button {
  background-color: #007BFF;
}

.card {
  border: 1px solid #007BFF;
}

.header {
  color: #007BFF;
}

同じ色を何度も書いている

サイトの規模が大きくなるとCSSの管理が大変になる

→色を変更する場合、全部探して修正する必要がある

それを楽にしてくれるのが「sass」

Sassの仕組み

Sassの記法

• SCSS記法（.scss）：CSSのルールに準拠（{ }, ;を使用）
• SASS記法（.sass）：インデントベース（{ }, ;は不要）

本講座では「SCSS記法（.scss）」で学習します

→主流である、CSSとほぼ同じ書き方である

Sassはブラウザでそのまま読み込めない

ブラウザはSCSSを直接読むことはできない

そのため「SCSS」→「CSS」に変換する必要がある

この変換処理を「コンパイル」と言う

Sassのコンパイル方法

sassコンパイルコマンドを打つ

VSCodeの拡張機能を使う

いろいろ方法はあるが、今回は「Vite」を使用

Viteの役割

Viteとは？

• 開発用サーバー
• 自動コンパイル
• 保存すると即反映

Viteの使い方

ターミナルで下記コマンドを実行

npm install
npm run dev

今回はテンプレートを配布します。

SCSSの基本① ネスト

SCSSではセレクタを入れ子で書ける

.card {
  padding: 20px;

  &__title {
    font-size: 20px;
  }

  &__text {
    font-size: 14px;
  }
}

&（親参照）

& は「親セレクタ」を参照する

.card__title
.card__text

SCSSの基本② 変数管理

SCSSでは変数を使える

変数設定

$primary-color: #007BFF;

変数使用

.button {
  background-color: $primary-color;
}

.card {
  border: 1px solid $primary-color;
}

.header {
  color: $primary-color;
}

• 色
• フォントサイズ
• 余白

などを一括管理できる

SCSSの基本③ ファイル分割と構成

実務ではSCSSを複数ファイルに分けます

scss/
├─ base/
├─ layout/
├─ component/
└─ style.scss

• base → リセットCSSなど
• layout → ヘッダー・フッター
• component → ボタン・カード

style.scssで各ファイルを読み込みます。

実践：既存CSSをSCSS化

Before（CSS）

.card {
  padding: 20px;
}

.card__title {
  font-size: 18px;
}

After（SCSS）

$card-padding: 20px;

.card {
  padding: $card-padding;

  &__title {
    font-size: 18px;
  }
}

見た目は変えず、管理しやすくします。

Sassとレスポンシブの相性

Sassではブレイクポイントも管理できます

$pc: 768px;

@media (min-width: $pc) {
  .card {
    display: flex;
  }
}

ブレイクポイントを変数で一括管理できる

設定ファイルについての解説

• package.json：何を動かしているか
• vite.config.js：何を設定しているか
• SassがCSSになる仕組み

本編では扱いません。資料のみ配布します。

この回のまとめ

• Sassは管理しやすくするための道具
• ネストと変数が重要
• Viteがコンパイルしてくれる
• 実務ではSCSSが一般的