【Web制作を効率化！】SCSSのコンパイル方法3選！あなたに合う環境はどれ？

【パターン1】専用ツール（GUIコンパイラ）で手軽に始める

まずご紹介するのは、専門的な知識があまりなくても直感的に操作できる「GUIコンパイラ」というソフトウェアを使う方法です。いわゆる「黒い画面」の操作が苦手な方でも、簡単な設定ですぐにSCSSのコンパイルを始められます。

有料のソフトもありますが、一度導入すればボタン一つで様々な処理を実行できるため、Web制作の心強いパートナーになってくれるでしょう。

CodeKit

Macユーザーにお馴染みの高機能GUIコンパイラです。有料ですが、SCSSのコンパイル以外にも、画像の圧縮やJavaScriptの結合など、Web制作に役立つ多くの便利機能を搭載しています。

料金：34ドル（※）
公式サイトはこちら

Prepros

Windowsで使える貴重な高機能GUIコンパイラです。無料でも利用できますが、定期的に購入を促すポップアップが表示されます。機能が豊富なので、気に入ったら購入を検討する価値は十分にあります。

料金：29ドル（※無料でも使用可）
公式サイトはこちら

Koala

Windows、Mac、Linuxのどれでも使える無料のGUIコンパイラです。無料で利用できますが、開発を支援するための寄付が推奨されています。手軽に試してみたい方におすすめです。

料金：無料（※）
公式サイトはこちら

※料金は記事執筆時点（2018年7月）のものです。最新の情報は各公式サイトでご確認ください。

【パターン2】Gulpなどのタスクランナーで自由にカスタマイズする

次にご紹介するのは、「タスクランナー」と呼ばれるツールを使ってコンパイル環境を自分で構築する方法です。代表的なツールに「Gulp」や「Webpack」などがあります。

導入にはコマンドラインでの操作が必要ですが、一度設定してしまえば、コンパイルの詳細な設定や、他の作業（画像の圧縮など）との連携も可能になり、非常に自由度の高いWeb制作環境を構築できます。

ここでは一例として、Gulpを使った導入手順を見ていきましょう。

GulpでSCSSを自動コンパイルするまでの手順

1. Node.jsをインストールする

まずは、Node.js公式サイトから最新版のインストーラーをダウンロードし、お使いのPCにインストールします。

2. プロジェクトの準備とpackage.jsonの作成

コマンドラインツール（Macならターミナル、Windowsならコマンドプロンプトなど）を起動し、cdコマンドでSCSSファイルを管理したいフォルダに移動します。移動したら、以下のコマンドを実行してpackage.jsonという設定ファイルを作成します。

npm init -y

3. Gulpと関連プラグインをインストールする

次に、Gulp本体と、SCSSをコンパイルするためのプラグイン「gulp-sass」をインストールします。-Dは、開発環境でのみ使うパッケージであることを示すオプションです。

npm install -D gulp gulp-sass

4. Gulpの設定ファイルを作成し、タスクを定義する

プロジェクトフォルダの直下にgulpfile.jsという名前のファイルを作成し、以下の内容を記述します。これがGulpの設計図になります。

// プラグインの読み込み
const gulp = require('gulp');
const sass = require('gulp-sass');

// 'default'という名前のタスクを定義
gulp.task('default', function () {
  // ① scss/style.scssファイルを取得
  return gulp.src('scss/style.scss')
    // ② Sassのコンパイルを実行
    .pipe(sass({
      outputStyle: 'compact' // CSSの出力形式を指定
    }))
    // ③ cssフォルダに保存
    .pipe(gulp.dest('css'));
});

ターミナルでnpx gulpと実行すると、このタスクが一度だけ実行され、cssファイルが書き出されます。

5. SCSSファイルの変更を監視し、自動でコンパイルする

毎回コマンドを打つのは大変なので、SCSSファイルを保存したタイミングで自動的にコンパイルが実行されるように設定しましょう。gulpfile.jsを以下のように書き換えます。

// プラグインの読み込み
const gulp = require('gulp');
const sass = require('gulp-sass');

// 'default'という名前のタスクを定義
gulp.task('default', function () {
  // ★ scssフォルダ内のすべての.scssファイルを監視
  return gulp.watch('scss/**/*.scss', function () {
    // ファイルが変更されたら、以下の処理を実行
    return gulp.src('scss/style.scss')
      .pipe(sass({
        outputStyle: 'compact'
      })
      // コンパイルでエラーが出ても監視を止めないようにする
      .on('error', sass.logError))
      .pipe(gulp.dest('css'));
  });
});

ターミナルで再度npx gulpを実行すると、監視がスタートします。これで、SCSSファイルを保存するたびに、自動でCSSファイルが更新されるようになりました！

【パターン3】Atomなど普段使いのエディタで完結させる

最後は、普段のWeb制作で使っているテキストエディタの拡張機能（プラグイン）を使ってコンパイルする方法です。エディタ内で完結するため、最も手軽な方法かもしれません。

今回は人気のテキストエディタ「Atom」での方法をご紹介しますが、「Visual Studio Code」など他の多くのエディタでも同様の拡張機能が提供されています。

AtomでSCSSを自動コンパイルする手順

1. Node.jsとnode-sassをインストールする

パターン2と同様に、まずはPCにNode.jsがインストールされているか確認してください。その後、コマンドラインツールで以下のコマンドを実行し、「node-sass」をPC全体で使えるようにインストールします。

npm install -g node-sass

2. Atomにパッケージをインストールする

Atomを起動し、「環境設定」→「インストール」画面を開きます。「sass-autocompile」と検索し、表示されたパッケージをインストールしましょう。

3. パッケージの設定を変更する

インストールしただけでは使いにくいので、実用的にするために設定を変更します。「環境設定」→「パッケージ」画面から「sass-autocompile」の設定画面を開きます。

最低限、以下の2点を設定しましょう。

• Compile on Save：チェックを入れると、ファイルを保存した時に自動でコンパイルされます。
• Filename pattern：CSSファイルの出力先フォルダやファイル名を指定できます。

4. コンパイルを試す

設定が完了したら、実際にSCSSファイルを作成・編集して保存してみてください。指定した場所にCSSファイルが書き出されていれば成功です！

よくある質問（FAQ）

Q1. SCSSを使うと、Web制作でどんないいことがありますか？

A1. CSSのコードをより効率的かつ管理しやすく書けるようになります。例えば、変数（色やフォントサイズなどを保存しておける機能）や、入れ子構造での記述、コードの再利用などが可能になります。これにより、開発スピードが向上し、修正やメンテナンスも簡単になるため、Web制作の品質向上に大きく貢献します。

Q2. 紹介された3つの方法のうち、初心者にはどれが一番おすすめですか？

A2. もしコマンドラインの操作に抵抗があるなら、まずは【パターン1】のGUIコンパイラ（特に無料のKoala）から試してみるのがおすすめです。直感的な操作でSCSSの便利さを体験できます。Web制作に慣れてきて、より細かい設定をしたくなったら、【パターン2】のGulpなどに挑戦してみると良いでしょう。

Q3. コンパイルでエラーが出たときは、どうすればいいですか？

A3. エラーが出たときは、まずツールのログやコマンドラインに表示されるエラーメッセージをよく読んでみましょう。ほとんどの場合、「どのファイルの何行目で問題が起きているか」が示されています。よくある原因は、カッコの閉じ忘れやセミコロンの抜けといった単純な文法ミスです。エラーメッセージをヒントに、該当箇所を確認・修正してください。