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

Sass（SCSS）とは？

Sassとは何か？

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

CSSの問題点とSassのメリット

【CSSの問題点①】セレクタが長くなる

【CSSの場合】

親要素の名前を何度も書く必要があり、コードが長くなったり書き間違えやすい

.card { ... }
.card .card__img { ... }
.card .card__title { ... }
.card .card__button { ... }

【Sassの場合】

タイピング量が減るのでミスも減り、構造もはっきりするので管理がしやすい

.card {
  padding: 20px;

  &__img { ... }
  &__title { ... }
  &__button { ... }
}

【CSSの問題点②】同じ値を何度も書く

【CSSの場合】

メインカラーをいろんな場所に書いている場合、変更するときに全箇所探しだして修正する必要がある

.button { background-color: #007BFF; }
.card { border: 1px solid #007BFF; }
.header { color: #007BFF; }

【Sassの場合】

変数が使えるので、1箇所変えるだけで使っている場所を全部一気に変得ることができる

$main-color: #e67e22; // 変数に保存

.button { background-color: $main-color; }
.card { border: 1px solid $main-color; }
.header { color: $main-color; }

Sassの実装方法

① SCSSファイルを作成

Sassを書く際は.scssファイルを作成する

基本のフォルダ・ファイル構成

root/
 ├─ index.html
 └─ scss/
     ├─ foundation/
     │   ├─ _reset.scss      （リセットCSS）
     │   └─ _variable.scss   （変数：色やフォントなど）
     ├─ layout/
     │   ├─ _header.scss     （ヘッダー用）
     │   └─ _footer.scss     （フッター用）
     ├─ object/
     │   └─ _button.scss     （ボタンなどの共通パーツ）
     └─ style.scss           （全てのファイルを読み込む親玉）

1. scss フォルダの中に、役割ごとのサブフォルダ（layout,objectなど）を作る
2. サブフォルダの中にパーツを作る（_header.scss_button.scssなど）
   パーツになるファイルの名前は、先頭に「 _（アンダースコア）」をつける
3. style.scssの中で、パーツになるファイルをすべて読み込む
   

② 「SCSS」を「CSS」にコンパイルする

ブラウザは.scssを直接読むことはできないため、「.scss」→「.css」に変換（コンパイル）する必要がある

Sassのコンパイル方法

• VSCodeの拡張機能を使う
• コンパイルコマンドを打つ

いろいろ方法はあるが、今回は「Vite（ヴィート）」を使用

③ 本番環境にビルドする

.scssの他にも.jsなどのファイルもまとめて、サイトとして公開できる形にする

Vite（ヴィート）の役割

Viteとは？

爆速の開発用サーバー

コマンドを一つ打つだけで、パソコン内に自分専用の「プレビュー用サーバー」が立ち上がり、ビルドしなくてもブラウザで実際の動きをすぐに確認できる

自動コンパイル

Sassのファイル（.scss）を保存するだけで、Viteが勝手にCSSに変換してくれる

保存すると即反映

コードを書いて保存した瞬間に、ブラウザをリロードしなくても画面の表示が切り替わるのでテンポ良く作業が進む

テンプレートファイル配布

今回はViteの開発環境として下記のテンプレートを使用します

開発環境の使い方

ターミナルを起動し、テンプレートファイルが置いてあるディレクトリに移動して下記コマンドを実行

必要な機能のインストール

npm install

開発サーバの起動

npm run dev

起動が成功すると、自動的にブラウザでページが開く

ビルドする際は下記コマンドを実行

npm run build

SCSSの書き方

入れ子（ネスト）

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

.card {
  padding: 20px;

  &__title {
    font-size: 20px;
  }

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

&（親参照）

& は「親セレクタ（.card）」を参照する

• &__title = .card__title
• &__text = .card__text

変数管理

SCSSでは、色や数値を「変数」という箱に入れて使い回すことができる

変数設定

$primary-color: #007BFF;

$名前: 値;で書く

変数使用

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

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

.header {
  color: $primary-color;
}

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

などを一括管理できる

CSSをSCSS化してみよう

Before（CSS）

.card {
  padding: 20px;
  border: 1px solid #3498db;
  border-radius: 8px;
}

.card .card__title {
  color: #3498db;
  font-size: 20px;
  margin-bottom: 10px;
}

.card .card__text {
  color: #333;
  line-height: 1.6;
}

.card .card__button {
  display: inline-block;
  background-color: #3498db;
  color: #fff;
  padding: 10px 20px;
  text-decoration: none;
}

.card .card__button:hover {
  opacity: 0.8;
}

同じ色が何度も出てきたり、.card という名前を何度も書くのが大変

After（SCSS）

/* ① 変数を使って色をまとめる */
$main-color: #3498db;
$text-color: #333;

/* ② ネストを使って親子関係をスッキリさせる */
.card {
  padding: 20px;
  border: 1px solid $main-color;
  border-radius: 8px;

  &__title {
    color: $main-color;
    font-size: 20px;
    margin-bottom: 10px;
  }

  &__text {
    color: $text-color;
    line-height: 1.6;
  }

  &__button {
    display: inline-block;
    background-color: $main-color;
    color: #fff;
    padding: 10px 20px;
    text-decoration: none;

    &:hover {
      opacity: 0.8; /* ホバーもネストの中に書ける！ */
    }
  }
}

「変数」で色を管理して、「ネスト」で構造をスッキリさせる

Sassとレスポンシブの相性

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

$pc: 768px;

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

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

package.json

開発に必要なツール（SassやViteなど）のリストと、実行コマンドをまとめた管理帳

SassがCSSになる仕組み

Viteは.scssを見つけると、この設定ファイル内にある「Sassライブラリ」を起動してコンパイルしてくれる

vite.config.js

どこに何があるかを探し出し、整理整頓して完成品（ビルド）を作るための指示書

まとめ

今回のまとめ

• SassはCSSを管理しやすくするための道具
• ネストと変数が重要
• ViteはSassをコンパイルしてくれて、変更を即反映してくれる便利なツール

次回の予定

Webサイトの品質に重要な画像形式とWebフォントについて学びます