English العربية Português 日本語

Sassカスタマイズ

1. レッスンの概要

(1) 前提条件

(2) 🎯 学習内容

(3) 課題点

ボブの会社のブランドカラーは紫（Bootstrapのデフォルトの青ではなく）、すべてのボタン、リンク、ボーダーをブランドカラーに変更する必要があります。CDN方式を使用すると、Bootstrapのプリセットスタイルは変更できず、毎回大量のCSSを手動で上書きする必要があります。

(4) 解決策

これまでの19レッスンでは、BootstrapをインクルードするためにCDN方式が使用されており、すべてのスタイルはプリセットでした。このレッスンではフェーズ5を開始します—SassによるBootstrapの深いカスタマイズであり、カラー、スペーシング、コンポーネントスタイルまで、すべてを完全に制御できます。Sass変数の上書きでは、$primary: purple;と1行変更するだけです。

アプローチの理解: CDN方式 = ファストフードを食べる（速いが選択肢がない）。Sassカスタマイズ = 自分で料理する（遅いが味を調整できる）。Sass変数はレシピの調味料のようなもので、1つの変数を変更すると関連するすべてのコンポーネントが自動的に更新されます。

(5) メリット

ボブは数個のSass変数を変更するだけで、すべてのボタン、リンク、ボーダーが自動的にブランドの紫色に変わります。将来のブランドカラーの調整は、1箇所を変更するだけでグローバルに効果が適用され、メンテナンスコストを大幅に削減できます。

2. 環境構築

Node.jsとnpmの環境が必要です:

BASH 
# プロジェクト作成
mkdir my-bootstrap-project
cd my-bootstrap-project

# 初期化
npm init -y

# Bootstrapとその依存関係をインストール
npm install bootstrap@5.3.3
npm install -D sass

プロジェクトのディレクトリ構造:

TEXT 
my-bootstrap-project/
  scss/
    custom.scss    # あなたのカスタムSassファイル
  dist/
    style.css      # コンパイルされたCSS
  index.html
  package.json

3. 基本的な変数の上書き

▶ サンプル 基本的な変数の上書きデモ

scss/custom.scss:

SCSS 
// 1. Bootstrap変数を上書き（bootstrapをインポートする前に定義が必要）
$primary: #6f42c1;        // パープルのブランドカラー
$success: #20c997;        // ティール
$font-family-sans-serif: 'Inter', system-ui, -apple-system, sans-serif;
$border-radius: 0.5rem;   // 8pxの角丸
$enable-shadows: true;    // シャドウユーティリティを有効化

// 2. Bootstrap全体をインポート
@import "../node_modules/bootstrap/scss/bootstrap";

// 3. カスタムスタイル
.custom-hero {
  background: linear-gradient(135deg, $primary, darken($primary, 15%));
}
▶ 試してみよう

出力: Bootstrap 5.3スタイルのコンポーネント効果（例: ボタン、カード、カルーセル、折りたたみなど）。ページはデフォルトでBootstrapデフォルトテーマ（ライト）とレスポンシブグリッドを使用します。 コンパイルコマンド:

BASH 
npx sass scss/custom.scss:dist/style.css --style compressed

index.html:

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sass Custom Bootstrap</title>
  <link rel="stylesheet" href="dist/style.css">
</head>
<body>
  <div class="container py-5">
    <button class="btn btn-primary">Primary (Purple)</button>
    <button class="btn btn-success">Success (Teal)</button>
    <div class="card shadow-sm mt-3 p-4" style="max-width: 400px;">
      <h5>Custom Card</h5>
      <p class="text-body-secondary">Border-radius is 0.5rem, shadows enabled.</p>
    </div>
  </div>
</body>
</html>
▶ 試してみよう

出力: Bootstrap 5.3スタイルのコンポーネント効果（例: ボタン、カード、カルーセル、折りたたみなど）。ページはデフォルトでBootstrapデフォルトテーマ（ライト）とレスポンシブグリッドを使用します。

4. 主要な上書き可能な変数

(1) カラー

SCSS 
// ブランドカラー
$primary:       #6f42c1;
$secondary:     #6c757d;
$success:       #20c997;
$info:          #0dcaf0;
$warning:       #ffc107;
$danger:        #dc3545;
$light:         #f8f9fa;
$dark:          #212529;

// カスタムカラー
$custom-color:  #ff6b6b;
$theme-colors: map-merge($theme-colors, (
  "custom": $custom-color,
));
▶ 試してみよう

出力: Bootstrap 5.3スタイルのコンポーネント効果（例: ボタン、カード、カルーセル、折りたたみなど）。ページはデフォルトでBootstrapデフォルトテーマ（ライト）とレスポンシブグリッドを使用します。 カスタムカラーを追加すると、btn-custom、text-custom、bg-customを使用できます。

(2) スペーシング

SCSS 
$spacer: 1rem;           // 基本スペーサー（デフォルト 1rem = 16px）
$spacers: (
  0: 0,
  1: $spacer * 0.25,     // 4px
  2: $spacer * 0.5,      // 8px
  3: $spacer,            // 16px
  4: $spacer * 1.5,      // 24px
  5: $spacer * 3,        // 48px
  6: $spacer * 4,        // 64px (カスタム)
  7: $spacer * 5,        // 80px (カスタム)
);
▶ 試してみよう

出力: Bootstrap 5.3スタイルのコンポーネント効果（例: ボタン、カード、カルーセル、折りたたみなど）。ページはデフォルトでBootstrapデフォルトテーマ（ライト）とレスポンシブグリッドを使用します。

(3) タイポグラフィ

SCSS 
$font-family-sans-serif: 'Inter', system-ui, -apple-system, sans-serif;
$font-size-base: 1rem;         // 16px
$h1-font-size: $font-size-base * 2.5;  // 40px
$headings-font-weight: 600;
$line-height-base: 1.7;        // より読みやすく
▶ 試してみよう

出力: Bootstrap 5.3スタイルのコンポーネント効果（例: ボタン、カード、カルーセル、折りたたみなど）。ページはデフォルトでBootstrapデフォルトテーマ（ライト）とレスポンシブグリッドを使用します。

(4) コンポーネント

SCSS 
$border-radius: 0.5rem;
$border-radius-lg: 0.75rem;
$border-radius-sm: 0.25rem;

$btn-border-radius: $border-radius;
$card-border-radius: $border-radius-lg;
$card-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
▶ 試してみよう

出力: Bootstrap 5.3スタイルのコンポーネント効果（例: ボタン、カード、カルーセル、折りたたみなど）。ページはデフォルトでBootstrapデフォルトテーマ（ライト）とレスポンシブグリッドを使用します。

5. 選択的なコンポーネントインポート

完全なBootstrap CSSは約250KB（非圧縮）です。一部のコンポーネントしか使用しない場合、必要なモジュールだけをインポートできます:

@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/variables-dark";
@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";

// オプション - 必要なものだけ選択
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/grid";
@import "../node_modules/bootstrap/scss/forms";
@import "../node_modules/bootstrap/scss/buttons";
@import "../node_modules/bootstrap/scss/card";
@import "../node_modules/bootstrap/scss/navbar";
@import "../node_modules/bootstrap/scss/utilities";
@import "../node_modules/bootstrap/scss/helpers";

// ユーティリティAPI（ユーティリティを使用する場合は必須）
@import "../node_modules/bootstrap/scss/utilities/api";
▶ 試してみよう

出力: Bootstrap 5.3スタイルのコンポーネント効果（例: ボタン、カード、カルーセル、折りたたみなど）。ページはデフォルトでBootstrapデフォルトテーマ（ライト）とレスポンシブグリッドを使用します。

6. ユーティリティクラスの拡張

SCSS 
// カスタムユーティリティを追加
$utilities: map-merge(
  $utilities, (
    "cursor": map-merge(
      map-get($utilities, "cursor"),
      (
        values: map-merge(
          map-get(map-get($utilities, "cursor"), "values"),
          (pointer: pointer, grab: grab)
        ),
      ),
    ),
  )
);
▶ 試してみよう

出力: Bootstrap 5.3スタイルのコンポーネント効果（例: ボタン、カード、カルーセル、折りたたみなど）。ページはデフォルトでBootstrapデフォルトテーマ（ライト）とレスポンシブグリッドを使用します。

7. 包括的な実践例

▶ サンプル 完全なカスタムテーマ

SCSS 
// scss/custom-theme.scss — 完全なカスタムテーマ
// ==========================================

// 1. ブランドカラー
$primary: #e83e8c;        // ピンク
$secondary: #6c757d;       // グレー
$success: #28a745;         // グリーン
$info: #17a2b8;            // ティール
$warning: #ffc107;         // イエロー
$danger: #dc3545;          // レッド

// 2. タイポグラフィ
$font-family-sans-serif: 'Inter', system-ui, -apple-system, sans-serif;
$font-size-base: 0.9375rem; // 15px
$headings-font-weight: 700;
$line-height-base: 1.7;

// 3. スペーシング
$spacer: 1rem;
$spacers: (
  0: 0,
  1: $spacer * 0.25,
  2: $spacer * 0.5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
  6: $spacer * 4,
  7: $spacer * 5,
);

// 4. ボーダーとシャドウ
$border-radius: 0.375rem;
$border-radius-lg: 0.5rem;
$border-radius-sm: 0.25rem;
$enable-shadows: true;

// 5. コンポーネントの調整
$btn-border-radius: 50rem;    // ピルボタン
$card-border-color: rgba(0,0,0,0.08);
$card-box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.075);
$navbar-dark-color: rgba(255,255,255,0.9);

// 6. Bootstrapをインポート
@import "../node_modules/bootstrap/scss/bootstrap";

// 7. カスタム拡張
.custom-gradient-bg {
  background: linear-gradient(135deg, $primary, darken($primary, 15%));
}
▶ 試してみよう

出力: Bootstrap 5.3スタイルのコンポーネント効果（例: ボタン、カード、カルーセル、折りたたみなど）。ページはデフォルトでBootstrapデフォルトテーマ（ライト）とレスポンシブグリッドを使用します。

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Custom Theme Demo</title>
  <link rel="stylesheet" href="dist/style.css">
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
</head>
<body>
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container">
      <a class="navbar-brand fw-bold" href="#">Brand</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#nav">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="nav">
        <ul class="navbar-nav ms-auto">
          <li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
          <li class="nav-item"><a class="nav-link" href="#">About</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Pricing</a></li>
        </ul>
      </div>
    </div>
  </nav>

  <div class="container py-5">
    <h1>Custom Bootstrap Theme</h1>
    <p class="lead">Brand color: <span class="text-primary fw-bold">Pink (#e83e8c)</span></p>

    <div class="d-flex gap-2 mb-4 flex-wrap">
      <button class="btn btn-primary">Primary</button>
      <button class="btn btn-secondary">Secondary</button>
      <button class="btn btn-success">Success</button>
      <button class="btn btn-danger">Danger</button>
      <button class="btn btn-warning">Warning</button>
      <button class="btn btn-info">Info</button>
    </div>

    <div class="row g-4">
      <div class="col-md-4">
        <div class="card p-4 shadow-sm">
          <h5>Custom Card</h5>
          <p class="text-body-secondary">Border-radius: 0.5rem, pill buttons above.</p>
          <button class="btn btn-primary rounded-pill">Pill Button</button>
        </div>
      </div>
      <div class="col-md-4">
        <div class="card p-4 shadow-sm">
          <h5>Spacing Test</h5>
          <p class="text-body-secondary">Custom spacers p-6 and p-7 available.</p>
          <div class="bg-light p-6 rounded">p-6 (4rem padding)</div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="card p-4 shadow-sm bg-primary text-white">
          <h5>Gradient BG</h5>
          <p class="text-white-50">Using custom-gradient-bg class.</p>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
▶ 試してみよう

出力: Bootstrap 5.3スタイルのコンポーネント効果（例: ボタン、カード、カルーセル、折りたたみなど）。ページはデフォルトでBootstrapデフォルトテーマ（ライト）とレスポンシブグリッドを使用します。

▶ サンプル ユーティリティクラスの拡張

SCSS 
// scss/utilities-extend.scss
// ==========================================

$primary: #6f42c1;

@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";

// ユーティリティを拡張
$utilities: map-merge(
  $utilities, (
    // カーソルユーティリティを追加
    "cursor": map-merge(
      map-get($utilities, "cursor"),
      (values: map-merge(
        map-get(map-get($utilities, "cursor"), "values"),
        (pointer: pointer, grab: grab, zoom: zoom-in)
      ))
    ),
    // 透明度ユーティリティを追加
    "opacity": (
      property: opacity,
      values: (0: 0, 25: 0.25, 50: 0.5, 75: 0.75, 100: 1),
    ),
    // カスタム幅のステップ
    "width": map-merge(
      map-get($utilities, "width"),
      (values: map-merge(
        map-get(map-get($utilities, "width"), "values"),
        (15: 15%, 35: 35%, 65: 65%)
      ))
    ),
  )
);

@import "../node_modules/bootstrap/scss/utilities";
@import "../node_modules/bootstrap/scss/utilities/api";
▶ 試してみよう

出力: Bootstrap 5.3スタイルのコンポーネント効果（例: ボタン、カード、カルーセル、折りたたみなど）。ページはデフォルトでBootstrapデフォルトテーマ（ライト）とレスポンシブグリッドを使用します。

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Extended Utilities</title>
  <link rel="stylesheet" href="dist/utilities-extend.css">
</head>
<body>
  <div class="container py-4">
    <h5>Custom Cursor Utilities</h5>
    <div class="d-flex gap-3 mb-4">
      <div class="border p-3 cursor-pointer">cursor-pointer</div>
      <div class="border p-3 cursor-grab">cursor-grab</div>
      <div class="border p-3 cursor-zoom">cursor-zoom</div>
    </div>

    <h5>Custom Width Steps</h5>
    <div class="w-15 bg-primary text-white p-2 mb-1 rounded">w-15</div>
    <div class="w-35 bg-success text-white p-2 mb-1 rounded">w-35</div>
    <div class="w-65 bg-info text-white p-2 mb-1 rounded">w-65</div>

    <h5>Opacity Utilities</h5>
    <div class="d-flex gap-2">
      <div class="bg-primary text-white p-3 opacity-100 rounded">100%</div>
      <div class="bg-primary text-white p-3 opacity-75 rounded">75%</div>
      <div class="bg-primary text-white p-3 opacity-50 rounded">50%</div>
      <div class="bg-primary text-white p-3 opacity-25 rounded">25%</div>
    </div>
  </div>
</body>
</html>
▶ 試してみよう

出力: Bootstrap 5.3スタイルのコンポーネント効果（例: ボタン、カード、カルーセル、折りたたみなど）。ページはデフォルトでBootstrapデフォルトテーマ（ライト）とレスポンシブグリッドを使用します。

▶ サンプル Sassダークモード

SCSS 
// scss/dark-theme.scss
// ==========================================

$enable-dark-mode: true;

// ライトカラーの上書き
$primary: #0d6efd;
$body-bg: #ffffff;
$body-color: #212529;

// ダークモードの上書き
$dark-bg: #0d1117;
$dark-surface: #161b22;
$dark-border: #30363d;
$primary-dark: #58a6ff;

@import "../node_modules/bootstrap/scss/bootstrap";

// ダークテーマのカスタムスタイル
[data-bs-theme="dark"] {
  --bs-body-bg: #{$dark-bg};
  --bs-body-color: #c9d1d9;
  --bs-card-bg: #{$dark-surface};
  --bs-border-color: #{$dark-border};
}
▶ 試してみよう

出力: Bootstrap 5.3スタイルのコンポーネント効果（例: ボタン、カード、カルーセル、折りたたみなど）。ページはデフォルトでBootstrapデフォルトテーマ（ライト）とレスポンシブグリッドを使用します。

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sass Dark Mode</title>
  <link rel="stylesheet" href="dist/dark-theme.css">
</head>
<body>
  <div class="container py-4">
    <div class="d-flex justify-content-between mb-4">
      <h5>Sass Dark Mode Demo</h5>
      <button class="btn btn-outline-primary btn-sm" onclick="toggleTheme()">
        <i class="bi bi-moon"></i> Toggle
      </button>
    </div>
    <div class="row g-3">
      <div class="col-md-4">
        <div class="card p-4">
          <h5>Card Title</h5>
          <p>This card adapts to the current theme.</p>
          <button class="btn btn-primary">Button</button>
        </div>
      </div>
      <div class="col-md-4">
        <div class="card p-4">
          <h5>Dark Surface</h5>
          <p>Custom dark variables applied via Sass.</p>
          <div class="alert alert-info">Info alert</div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="card p-4">
          <h5>Border Colors</h5>
          <p>Card border uses custom $dark-border.</p>
          <div class="border p-2 rounded">Bordered box</div>
        </div>
      </div>
    </div>
  </div>
  <script>
    function toggleTheme() {
      const html = document.documentElement;
      const next = html.getAttribute('data-bs-theme') === 'dark' ? 'light' : 'dark';
      html.setAttribute('data-bs-theme', next);
    }
  </script>
</body>
</html>
▶ 試してみよう

出力: Bootstrap 5.3スタイルのコンポーネント効果（例: ボタン、カード、カルーセル、折りたたみなど）。ページはデフォルトでBootstrapデフォルトテーマ（ライト）とレスポンシブグリッドを使用します。

▶ サンプル コンポーネントのカスタマイズ

SCSS 
// scss/component-custom.scss
// ==========================================

$primary: #6f42c1;
$border-radius: 0.5rem;

// カードのカスタマイズ
$card-border-radius: 0.75rem;
$card-cap-bg: transparent;
$card-box-shadow: 0 0.5rem 1.5rem rgba(106, 13, 173, 0.1);
$card-border-color: rgba(106, 13, 173, 0.15);

// ボタンのカスタマイズ
$btn-padding-y-lg: 0.75rem;
$btn-padding-x-lg: 2rem;
$btn-font-weight: 600;

// Navbarのカスタマイズ
$navbar-padding-y: 1rem;
$navbar-brand-font-size: 1.5rem;

// フォームのカスタマイズ
$input-border-radius: 0.5rem;
$input-focus-border-color: $primary;
$input-focus-box-shadow: 0 0 0 0.25rem rgba(106, 13, 173, 0.25);

@import "../node_modules/bootstrap/scss/bootstrap";
▶ 試してみよう

出力: Bootstrap 5.3スタイルのコンポーネント効果（例: ボタン、カード、カルーセル、折りたたみなど）。ページはデフォルトでBootstrapデフォルトテーマ（ライト）とレスポンシブグリッドを使用します。

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Component Customization</title>
  <link rel="stylesheet" href="dist/component-custom.css">
</head>
<body>
  <div class="container py-4">
    <h5>Custom Cards</h5>
    <div class="row g-4 mb-5">
      <div class="col-md-4">
        <div class="card p-4">
          <div class="card-body">
            <h5 class="card-title">Purple Theme Card</h5>
            <p class="card-text">Rounded 0.75rem, purple border, custom shadow.</p>
            <a href="#" class="btn btn-primary">Read More</a>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="card p-4">
          <div class="card-body text-center">
            <h5 class="card-title">Centered Card</h5>
            <p class="card-text">Custom card-cap background removed.</p>
            <a href="#" class="btn btn-outline-primary">Details</a>
          </div>
        </div>
      </div>
    </div>

    <h5>Custom Buttons</h5>
    <div class="d-flex gap-2 mb-4">
      <button class="btn btn-primary btn-lg">Large Custom</button>
      <button class="btn btn-primary">Default</button>
      <button class="btn btn-primary btn-sm">Small</button>
    </div>

    <h5>Custom Forms</h5>
    <div class="row">
      <div class="col-md-6">
        <input type="text" class="form-control mb-2" placeholder="Custom input focus...">
        <select class="form-select">
          <option>Option 1</option>
          <option>Option 2</option>
        </select>
      </div>
    </div>
  </div>
</body>
</html>
▶ 試してみよう

出力: Bootstrap 5.3スタイルのコンポーネント効果（例: ボタン、カード、カルーセル、折りたたみなど）。ページはデフォルトでBootstrapデフォルトテーマ（ライト）とレスポンシブグリッドを使用します。

(1) Sassコンパイルフロー

100% 
graph LR
    A[custom.scss<br/>変数の上書き + カスタムスタイル] --> B[Sassコンパイラ]
    C[bootstrap/scss/] --> B
    B --> D[style.css<br/>完全なコンパイル]
    D --> E[PurgeCSS]
    E --> F[style.min.css<br/>使用されたクラスのみが残る]
    F --> G[ブラウザの読み込み]

    H[--watchモード] -.-> B
    I[--style compressed] -.-> D

出力: Bootstrap 5.3スタイルのコンポーネント効果（例: ボタン、カード、カルーセル、折りたたみなど）。ページはデフォルトでBootstrapデフォルトテーマ（ライト）とレスポンシブグリッドを使用します。

(2) 主要変数参照表

変数名 デフォルト値 目的 影響範囲
$primary #0d6efd テーマの主要カラー ボタン、リンク、背景、ボーダー
$font-size-base 1rem 基本フォントサイズ グローバルな本文テキストサイズ
$spacer 1rem スペーシングの基本値 すべてのスペーシング p-* m-* gap-*
$border-radius 0.375rem 基本の角丸半径 ボタン、カード、入力欄
$enable-shadows true シャドウを有効化 shadow-*ユーティリティクラス
$enable-dark-mode true ダークモードサポート data-bs-themeサポート
$font-family-sans-serif システムフォントスタック フォントファミリー グローバルな本文フォント

(3) コンポーネント変数接頭辞表

コンポーネント 変数接頭辞 変数の例
ボタン $btn-* $btn-border-radius $btn-padding-y
カード $card-* $card-border-radius $card-box-shadow
Navbar $navbar-* $navbar-padding-y $navbar-dark-color
フォーム $input-* $input-border-radius $input-focus-box-shadow
モーダル $modal-* $modal-backdrop-bg $modal-content-border-radius
テーブル $table-* $table-bg $table-striped-order
アラート $alert-* $alert-border-radius $alert-link-font-weight

(4) ビルドツール比較表

ツール 目的 設定難易度 Bootstrap互換性 推奨シナリオ
sass (Dart Sass) SCSSをCSSにコンパイル ⭐ 公式に推奨 シンプルなプロジェクト、Sassのみ
Webpack モジュールバンドル + Sassコンパイル ⭐⭐⭐ 一般的に使用 大規模なSPAプロジェクト
Vite 高速ビルド + Sassコンパイル ⭐⭐ 推奨 モダンなフロントエンドプロジェクト
Parcel ゼロ設定ビルド ⭐ 使用可能 高速プロトタイピング、小規模プロジェクト
Gulp タスクランナー ⭐⭐⭐ クラシックな組み合わせ 伝統的なプロジェクト、マルチタスクワークフロー

❓ よくある質問

Q Sassコンパイルでエラーが出た場合はどうすればよいですか？
A node-sassまたはsassのバージョンがBootstrap 5.3と互換性があるか確認してください。sass（Dart Sass）の使用が推奨されます。コンパイルコマンドにはnpx sassを使用し、グローバルインストールは避けてください。
Q SassをCSS変数（CSSカスタムプロパティ）に置き換えることはできますか？
A はい。Bootstrap 5.3は広くCSS変数を使用しています。コンパイルツールなしで、:rootで--bs-primary、--bs-border-radiusなどを上書きできます。ただし、Sassのアプローチはより柔軟です（計算、ループ、カスタム関数をサポート）。
Q 変数を上書きした後、一部のコンポーネントが変更されないのはなぜですか？
A 変数が@import bootstrapの前に定義されていることを確認してください。Sass変数のスコープは順序に依存します—効果を発揮するには、使用される前に定義する必要があります。
Q SassとPostCSSの違いは何ですか？どちらを使うべきですか？
A Sassはプリプロセッサ（変数、ネスト、ミックスイン、ループ）です。PostCSSはポストプロセッサ（ブラウザ接頭辞の自動追加、冗長性の除去）です。Bootstrapは公式にカスタマイズにSassを使用しています。推奨される組み合わせ: 変数の上書きとコンパイルにSassを使用し、ブラウザ接頭辞の追加にPostCSS + Autoprefixerを使用します。競合はなく、一緒に使用できます。
Q 変数の上書きの優先順位は何ですか？
A 低から高へ: (1) Bootstrapのデフォルト; (2) _variables.scssでの上書き; (3) @import前のcustom.scssでの上書き; (4) @import後のカスタムスタイル。注意: CSS変数（--bs-primary）はSass変数より優先順位が高くなります。再コンパイルなしで:root { --bs-primary: red; }を使用して上書きできます。

📖 まとめ

📝 練習問題

  1. ⭐ Bootstrap Sassを使用したプロジェクトを作成: ブランドカラーを#e83e8c（ピンク）、ボタンの角丸半径を0.25rem、基本フォントサイズを15pxに設定してください。
  2. ⭐⭐ 選択的なコンポーネントインポート: グリッド、ボタン、カード、フォーム、Navbarモジュールのみをインポートしてください。コンパイルし、ファイルサイズの違いをBootstrap全体と比較してください。
  3. ⭐⭐⭐ カスタムスペーシング: spacer-6 = 4remとspacer-7 = 6remを追加してください。p-6とmt-7が機能するか確認してください。

前のレッスン: 包括的な実践: 企業ウェブサイトのホームページ · 次のレッスン: ダークモード

Web-Tutorial.com

Web-Tutorial 技術チーム

複数の開発者によって共同維持されているプログラミングチュートリアルプラットフォーム。各チュートリアルは専門分野の開発者が執筆・レビューしています。正確で信頼性の高いコンテンツを目指しています — 問題を見つけた場合はお知らせください。

100%