2026年5月20日

WordPressのSCSSをコンパイルしてテーマに組み込む方法

テーマ・デザイン

はじめに

SCSSはCSSに変数・ネスト・ミックスイン・継承などの機能を追加したメタ言語です。WordPressテーマ開発ではNode.js+Sassでコンパイルするか、@wordpress/scripts（wp-scripts）を使う方法が一般的です。

症状・原因

CSSファイルが肥大化して管理が難しい
色やサイズを一括変更したい
SCSSを導入したいがビルド環境の設定が分からない

解決手順

ステップ1：Node.js+Sassのセットアップ

# テーマディレクトリで初期化
cd wp-content/themes/my-theme
npm init -y

# Sass（DartSass）をインストール
npm install --save-dev sass

// package.json のスクリプトを追加
{
    "scripts": {
        "sass:watch": "sass scss/style.scss style.css --watch --style=compressed",
        "sass:build": "sass scss/style.scss style.css --style=compressed --no-source-map"
    }
}

# 監視モード（開発中）
npm run sass:watch

# ビルド（本番用）
npm run sass:build

ステップ2：SCSSファイル構成（7-1パターン）

scss/
├── style.scss         // メインファイル（@forwardのみ）
├── abstracts/
│   ├── _variables.scss  // CSS変数・SCSS変数
│   ├── _mixins.scss     // ミックスイン
│   └── _functions.scss  // 関数
├── base/
│   ├── _reset.scss
│   └── _typography.scss
├── components/
│   ├── _buttons.scss
│   ├── _cards.scss
│   └── _nav.scss
├── layout/
│   ├── _header.scss
│   ├── _footer.scss
│   └── _grid.scss
└── pages/
    ├── _home.scss
    └── _single.scss

// scss/style.scss
@forward 'abstracts/variables';
@forward 'abstracts/mixins';
@forward 'base/reset';
@forward 'base/typography';
@forward 'components/buttons';
@forward 'components/cards';
@forward 'layout/header';
@forward 'layout/footer';

ステップ3：SCSSの実践的な書き方

// _variables.scss
$color-primary:   #2271b1;
$color-accent:    #d63638;
$color-text:      #1d2327;
$space-md:        1.5rem;
$border-radius:   6px;

// CSSカスタムプロパティに変換する方法
:root {
    --color-primary:   #{$color-primary};
    --space-md:        #{$space-md};
}

// _mixins.scss
@mixin respond-to($breakpoint) {
    @if $breakpoint == 'sm' {
        @media (max-width: 600px) { @content; }
    } @else if $breakpoint == 'md' {
        @media (max-width: 900px) { @content; }
    } @else if $breakpoint == 'lg' {
        @media (max-width: 1200px) { @content; }
    }
}

@mixin flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

// _cards.scss（ネスト + ミックスイン）
.card {
    background: #fff;
    border-radius: $border-radius;
    overflow: hidden;

    &__thumb img {
        width: 100%;
        aspect-ratio: 16/9;
        object-fit: cover;
    }

    &__body {
        padding: $space-md;
    }

    &:hover {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    }

    @include respond-to('sm') {
        border-radius: 0;
    }
}

ステップ4：@wordpress/scriptsを使う方法（ブロックテーマ・プラグイン）

npm install --save-dev @wordpress/scripts

{
    "scripts": {
        "start": "wp-scripts start",
        "build": "wp-scripts build"
    }
}

wp-scripts は src/style.scss を自動検出し build/style.css にコンパイルします。

// functions.php
wp_enqueue_style('my-theme', get_template_directory_uri() . '/build/style.css', [], '1.0.0');

注意事項

@import はSass 3.x から非推奨です。@use と @forward を使ってください
コンパイル済みの style.css をGitで管理するかどうかはチームで統一してください。.gitignore に含める場合はCIでビルドが必要です
WordPressの style.css にはテーマ情報のコメントが必要です。style.css を直接SCSSで上書きしないよう注意してください

まとめ

npm install --save-dev sass してから package.json に "sass:watch": "sass scss/style.scss style.css --watch" を追加するだけで開発環境が整います。SCSS変数をCSS変数に変換する #{$variable} 記法と、メディアクエリを束ねる @mixin respond-to() が特に便利です。

Post Views: 16