Sassとは

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

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

• Sass: Syntactically Awesome Style Sheets

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

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

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

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

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

• Mac OS XにNode.jsとnpmをHomebrewを使ってインストールする – mae’s blog

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

• GruntをMac OS X Yosemiteに導入する方法 – インストールからタスクを実行するまで – mae’s blog

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に結合し、圧縮するようにしていきます。

GruntでSassを扱うための準備

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

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

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

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

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

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

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;
  }
}

「style: ‘nested’」で変換

.item {
  display: flex; }
  .item figcaption {
    padding-left: 8px; }
  .item__image {
    flex: none; }

「style: ‘compact’」で変換

.item { display: flex; }
.item figcaption { padding-left: 8px; }
.item__image { flex: none; }

「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;
}

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

• gruntjs/grunt-contrib-sass#options

Gruntを実行

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

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

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

• scssファイルから生成されたstyle.cssファイル

まとめ

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

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

• Gruntで始めるWeb制作の自動化 – to-R
• CSSコーディングで泣かないためのSassの基礎知識と10の利点 – @IT