WordPressテーマ編集にSassを使う – GruntでCSSにコンパイル、結合、圧縮する方法

自分のMacにもタスクランナーである「Grunt」を入れたので、プライベートな開発でも作業の自動化が可能になっています。WordPressのテーマもローカルで開発していて、最近Gruntをテーマのディレクトリにインストールしました。今後は肥大化したstyle.cssをSASSで書いて、なおかつ機能ごとに分割させて効率良く開発していこうと考えており、今回Gruntを使っての開発環境を整えました。

Sassとは

sass

SassはCSSのメタ言語です。IT用語辞典では、 プログラミング言語の仕様を取り入れて効率的にCSSを定義できるようにした言語で、変数や算術演算、セレクタ指定の入れ子(ネスト)、外部ファイルの読み込み、複数のCSS定義の結合(ミックスイン)など、CSSにはない機能を利用することができる と説明されています。

Sassをインストールすることで、Sassファイル(.sass / .scss)をコンパイルしてCSSに変換することができるようになります。またコンパイルする際に複数のSassファイルを結合し、さらに圧縮(ミニファイ化)させることができるようになります。

以下のコマンドでSassをインストールします。(※SassをインストールするにはRubyがインストールされている必要があります。)

$ gem install sass

今回はタスクランナーの「Grunt」を使ってSassの処理の自動化を行っていきます。Gruntには、SassのコンパイルやCSSファイルの結合、圧縮してくれるプラグインがあります。SassをGruntで扱う方法を以下に紹介します。

WordPressテーマディレクトリにGruntを導入

まずGruntコマンドを使えるようにするために、Grunt-cliをシステムにインストールします

$ npm install grunt -g

「Grunt-cli」や「Grunt」をインストールするには、Node.jsとそのパッケージ管理システムのnpmがインストールされている必要があります。詳細は以下を参考にしてください。

また、Gruntのインストールや使い方などは以下を参考にしてください。

Gruntをインストールするための準備として、WordPressのテーマディレクトリに移動し、[npm init]コマンドを実行して、「package.json」ファイルを作成します。

$ cd テーマのディレクトリ名
$ npm init

package.jsonファイルを作成したら、Gruntをインストールします。

$ npm install grunt --save-dev

Gruntのインストールが完了したら、Gruntで実行するタスクを書き込むための「Gruntfile.js」ファイルを作成します。

$ touch Gruntfile.js

Sassファイルの準備

次にSassファイルを準備します。Sassファイルには、拡張子が「.sass」と「.scss」の2種類あります。最近ではcssの書き方に近い「.scss」がよく使われるようになってきているので、今回は「.scss」でSassファイルを作ります。

とりあえず、今回は以下の4つのscssファイルを準備しました。最終的にこの4つのファイルをWordpressテーマ用のstyle.cssに結合し、圧縮するようにしていきます。

  • style.scss: 全体に共通部分のスタイル
  • index.scss: インデックスページのスタイル
  • single.scss: 記事ページのスタイル
  • sidebar.scss: サイドバーのスタイル

GruntでSassを扱うための準備

Gruntプラグインのインストール

GruntでSassを扱うためのプラグインは以下となります。

それぞれ以下のコマンドでプラグインをWordPressテーマのフォルダ内にインストールします。

grunt-contrib-sassをインストール

$ npm install grunt-contrib-sass --save-dev

grunt-contrib-cssminをインストール

$ npm install grunt-contrib-cssmin --save-dev

grunt-contrib-watchをインストール

$ npm install grunt-contrib-watch -save-dev

Gruntfile.jsにタスクを記述

それぞれプラグインのインストールが完了したら、Gruntfile.jsにタスクを記述していきます。

module.exports = function (grunt) {

  grunt.initConfig({

    // scssファイルをcssファイルにコンパイルするタスクを設定
    sass: {
      dist: {
        options: { // Sassのオプションを設定
          style: 'expanded' // Sassのコンパイル時の変換方法
        },
        files: [{
          expand: true, // 特定のディレクトリの指定を許可
          cwd: 'scss', // タスクを実行するディレクトリ
          src: ['*.scss'], // タスクを実行するファイル
          dest: 'css', // コンパイルしたcssファイルの置き場所
          ext: '.css' // コンパイル後のファイル
        }]
      }
    },

    // コンパイルしたCSSファイルをstyle.cssに結合するタスクを設定
    cssmin: {
      minify: {
        files: {
          // 結合先のcssファイル名: 結合するcssファイル名
          'style.css': [
            'css/index.css',
            'css/single.css',
            'css/style.css',
            'css/sidebar.css'
          ]
        }
      }
    },

    // ファイルの変更を監視するタスクを設定
    watch: {
      sass: {
        // 監視するファイル
        files: 'scss/*.scss',
        tasks: ['sass']
      },

      css: {
        // 監視するファイル
        files: [
          'css/index.css',
          'css/single.css',
          'css/style.css',
          'css/sidebar.css'
        ],
        tasks: ['cssmin']
      }
    }

  });

  // Gruntプラグインの読み込み
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-sass');
  grunt.loadNpmTasks('grunt-contrib-cssmin');

  // gruntコマンドを叩いた際に実行されるタスク
  grunt.registerTask('default', ['sass', 'cssmin']);

};

Sassのコンパイル時の変換方法

上記のGruntfile.jsには、Sassのコンパイル時の変換方法がオプションとして設定してあります。grunt-contrib-sassのオプション「style」を指定すると、以下の4つのタイプに変換が可能です

以下のscssファイルがオプションによってどのように変換されるか例を挙げてみます。

.item {
  display: flex;
  figcaption {
    padding-left: 8px;
  }
  &__image {
    flex: none;
  }
}
コンパイル前のscssファイル

「style: ‘nested’」で変換

.item {
  display: flex; }
  .item figcaption {
    padding-left: 8px; }
  .item__image {
    flex: none; }
Sassの入れ子を反映したタイプ

「style: ‘compact’」で変換

.item { display: flex; }
.item figcaption { padding-left: 8px; }
.item__image { flex: none; }
1セレクタごとに1行ずつのタイプ

「style: ‘compressed’」で変換

.item{display:flex;}.item figcaption{padding-left:8px;}.item__image{flex:none;}
全ての改行とスペースを取り除いたサイズを極限まで小さくしたタイプ

「style: ‘expanded’」で変換

.item {
  display: flex;
}
.item figcaption {
  padding-left: 8px;
}
.item__image {
  flex: none;
}
通常のCSSのスタイル

grunt-contrib-sassのオプションについては以下をご参照ください。

Gruntを実行

以上でWordPressでSassを使う準備は完了です。以下のコマンドでタスクを実行します。

$ grunt

以下のコマンドを叩いてからファイルの更新を行うと、自動的にタスクが実行させるようになります。

$ grunt watch

Sassファイルが更新される度に、CSSファイルにコンパイルされ、圧縮された形でWordPressテーマ用のCSSファイルであるstyle.cssが生成されるようになります。生成されたstyle.cssは以下のとおりです。ちなみにファイル容量は19KBから12.5KBにまで減量することに成功しています。

まとめ

Sassを使えるようにして、Sassファイルのコンパイル、結合、圧縮などはできるようになりました。次はSassの構文を使ってcssを書いていきたいですね。特にSassを使うとBEMを取り入れたCSSもかなり書きやすくなるということなので、その辺りから挑戦していこうと思っています。

最後に今回参考にしたサイトと、Sassの本を紹介します。

『Web制作者のためのSassの教科書 これからのWebデザインの現場で必須のCSSメタ言語』
著者: 平澤 隆, 森田 壮
出版社: インプレスジャパン
発売日: 2013年9月13日
ISBN: 4844334662
⇒Amazon.co.jpで詳細を見る

コメント一覧

  • 必須

コメント