開発効率向上!Sublime Text3+SCSS+CompassでWindows上に快適CSS編集環境を作る方法

前回、Windows上で最も簡単に設定できるであろうSCSSコンパイル環境を作成しました。

KoalaというSCSS(SASS)開発補助ツールを使ってWordpressテーマの開発効率を手軽にアップする方法
SCSS便利です。 便利な機能を、いろいろ挙げるときりがありませんが、CSSで変数を使えるという、それだけでも便利すぎます。テーマカラ...

上記の方法は、GUIアプリで設定&コンパイルができるので、とても取っつきやすい方法です。

ただ、できるなら、いつも利用しているSublime Textからガシガシ利用できた方が、より開発効率が上がります。

ということで今回は、以下の組み合わせでCSSコンパイル環境を作成する方法まとめたので紹介です。

スポンサーリンク
レクタングル(大)広告

主な手順

上に書いた開発環境を作成するには、以下の手順が必要です。

  1. Rubyのインストール
  2. gemのアップデート
  3. Sassのインストール
  4. Compassのインストール
  5. Sublime Textの各種パッケージのインストール
  6. プロジェクトの作成
  7. Compassの設定ファイルの作成
  8. コンパイルして動作確認

今回の方法は、Koalaを使った方法ほど手軽ではなく、コマンドプロンプトのような黒い画面でコマンド打つ必要があるので、多少手間はかかります。

ただ、初期設定こそ面倒ですが、Sublime Text使いには作業効率がアップする方法だと思います。

Rubyのインストール

Windowsは、デフォルトでRubyがインストールされていないので、まずはRubyをインストールする必要があります。

既にRubyがインストールされている場合は、この項目を飛ばしてください。

まずは、RubyInstaller for Windowsからファイルをダウンロードします。

RubyInstallerのダウンロード

ダウンロードをし終えたら、ファイル(rubyinstaller-x.x.x-x64.exe)を実行してください。

まず言語は日本語を選択します。

セットアップに使用する言語の選択

使用許諾契約書に同意して「次へ」ボタンを押します。

Rubyのセットアップ

「インストール先とオプションの指定」画面で、インストール先を選択するとともに、「Rubyの実行ファイルへ環境変数PATHを設定する」にチェックを入れて「インストール」ボタンを押してください。

Rubyのパスの設定

以下のような画面が出れば、インストール完了です。

Rubyセットアップの完了

Rubyの動作確認

ここで、正常にRubyがインストールされたか、動作確認をします。

コマンドプロンプトを起動して、以下を入力してEnterを押してください。

以下のように、Rubyのバージョンが表示されれば、正常にインストールされています。

Rubyのバージョン確認

gemのアップデート

ここで、以下のようにコマンドプロンプトに入力してgemのアップデートを行います。

すると、以下のようにgemがアップデートされます。

gemのアップデート

もしエラーが出たら

もしかしたらWindowsの場合、以下のようなSSLエラーが出るかもしれません。

これは、WindowsのRubyGemsのバグです。

解決方法と、詳しい原因は以下を参照してください。

Sassのインストール

次に、gemでSassをインストールします。

コマンドプロンプトに、以下のように入力してください。

インストールがうまくいけば、以下のように表示されます。

Sassのインストール成功

Compassのインストール

次はgemでCompassをインストールします。

コマンドプロンプトに以下のように入力してください。

Compassのインストール成功

Sublime Textのパッケージのインストール

次に、Sublime Text3側の設定です。

とりあえず、これまではWordpressテーマ開発用のエディターとして以下のような設定を行っています。

Wordpress開発向けSublime Text3環境の構築方法まとめ
先日、Wordpress編集向けにSublime Textの開発環境を新たに作ってみました。 というのも最近は、Wordpre...

上記の設定に加えて、Compassのパッケージをインストールします。

パッケージのインストール

パッケージをインストールするには、「Preferences→Package Control」を選択します。

Preferences→Package Control

「Package Control: Install Package」を選択します。

Package Controlのインストール

入力欄に「compass」と入力すると、インクリメンタルサーチされCompassパッケージが表示されるので、クリックしてインインストールします。

Compassパッケージのインストール

その他のパッケージとして、以下をインストールしておくといいかもしれません。

  • SCSS(ファイルタイプにSCSSを追加)
  • SCSS Snippets(SCSSのスニペット)
  • Sass(ファイルタイプにSassを追加)

プロジェクトの作成

次に、プロジェクトを作成します。

今回は、Wordpressテーマのstyle.cssを書くためのプロジェクト作成しようと思っています。

まず、フォルダを作成します。(今回は「wp-theme」というフォルダを作成)

そのフォルダの下に以下のように、「config.rb」と「style.scss」の空のファイルを作成します。

  • wp-theme
    • config.rb
    • style.scss

Compassの設定ファイルの作成

Compassの設定は、「config.rb」に以下のように記入します。

WordPressのstyle.css向けなので、上記のように設定しました。

アウトプットスタイルの変更や、デバック用コメントの挿入、Sass記法への切り替えなどは、適切な部分をコメントアウトして設定変更してみてください。

config.rbの設定について詳しくは、以下を参照してください。

参考 CSSの常識が変わる!「Compass」の基礎から応用まで! | 株式会社LIG

コンパイルして動作確認

次にコンパイルを行うため、先程作成したstyle.scssファイルに記入します。

SCSSの記入

今回はテスト用に、以下のように記入しました。

注意点

「@charset “UTF-8”;」を記入しておかないと、コンパイル時に以下のようなエラーが出るので必ず入力するようにしてください。

コンパイル後も、コメントを残すには、以下のようにコメントに!(エクスクラメーション)を記入してください。

WordPressのテーマ情報を残したい時などに重宝します。

Sublime Text3でコンパイル

まずはプロジェクトの「style.scss」ファイルを選択します。

style.scssファイルの選択

Sublime Text3のメインメニューから、「Tools→Build System→Compass」を選択します。

Tools→Build System→Compass

「style.scss」ファイルを開いて、「Tools→Build」、

Tools→Build

もしくは、CtrlBキーを押せばSCSSファイルがコンパイルされ、style.cssファイルが作成されます。

SCSSをコンパイル

ショートカットキーを押すだけで、0.5秒ほどでコンパイルされ、

0.5秒ほどでコンパイル

同フォルダ内に「style.css」ファイルが作成されました。

style.cssファイルが作成された

デフォルトの設定でコンパイルすると以下のようなスタイルシートが作成されました。

ネストや変数が展開されます。コメントは、デバッグ用に編集箇所がわかるようになっています。

これらの出力方法を自分好みにカスタマイズするには、プロジェクト内の「config.rb」を編集します。

まとめ

今回のSublime Text3を使った方法は、Koalaを使った方法ほど手軽ではないにせよ、手順を追って1つ1つ行っていけば、ほぼコピペだけで設定を行えるので、それほど難しくはないと思います。

それにしても、Sublime Textで、Emmetと、SCSSと、Compassを利用した、CSS編集の爽快感というか気持ちよさはハンパないです。

ちょろっとコードを書くだけで、綺麗に整理されたCSSがザクザク生産できます。Compassの設定を少し変更するだけで、ページ高速化対応にも簡単にできますし。

最初っから、面倒くさがらずに、この設定を調べてやっておけば良かったです。