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

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

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 -v

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

Rubyのバージョン確認

gemのアップデート

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

gem update --system

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

gemのアップデート

C:\Users\y>gem update --system
Updating rubygems-update
Fetching: rubygems-update-2.4.6.gem (100%)
Successfully installed rubygems-update-2.4.6
Parsing documentation for rubygems-update-2.4.6
Installing ri documentation for rubygems-update-2.4.6
Installing darkfish documentation for rubygems-update-2.4.6
Done installing documentation for rubygems-update after 1 seconds
Parsing documentation for rubygems-update-2.4.6
Done installing documentation for rubygems-update after 0 seconds
Installing RubyGems 2.4.6
RubyGems 2.4.6 installed
Parsing documentation for rubygems-2.4.6
Installing ri documentation for rubygems-2.4.6

もしエラーが出たら

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

Gem::RemoteFetcher::FetchError: SSL_connect returned=1 errno=0 state=SSLv3 read server certificate B: certificate verify failed

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

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

エラー内容Windowsでgem install(bundle install)すると、Gem::RemoteFetcher::FetchError: SSL_connect returned=…

Sassのインストール

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

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

gem install sass

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

Sassのインストール成功

C:\Users\y>gem install sass
Fetching: sass-3.4.13.gem (100%)
Successfully installed sass-3.4.13
Parsing documentation for sass-3.4.13
Installing ri documentation for sass-3.4.13
Done installing documentation for sass after 8 seconds
1 gem installed

Compassのインストール

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

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

gem install compass

Compassのインストール成功

C:\Users\y>gem install compass
Fetching: ffi-1.9.8-x64-mingw32.gem (100%)
Successfully installed ffi-1.9.8-x64-mingw32
Fetching: rb-inotify-0.9.5.gem (100%)
Successfully installed rb-inotify-0.9.5
Fetching: rb-fsevent-0.9.4.gem (100%)
Successfully installed rb-fsevent-0.9.4
Fetching: chunky_png-1.3.4.gem (100%)
(中略)
Done installing documentation for ffi, rb-inotify, rb-fsevent, chunky_png, compa
ss-import-once, multi_json, compass-core, compass after 8 seconds
8 gems installed

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

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

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

先日、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」に以下のように記入します。

require 'compass/import-once/activate'
# アディショナルCompassプラグインを利用するなら以下に書く

# プロジェクトのディレクトリをここにセットする
http_path       = "/"
css_dir         = "/"      #CSSを書き出すディレクトリ
sass_dir        = "/"      #SASSファイルがあるディレクトリ
images_dir      = "images" #画像用のディレクトリ
javascripts_dir = "js"     #JavaScriptファイル用のディレクトリ

# アウトプットスタイルの選択(利用するスタイルのコメントを外して利用する)(デフォルト:expanded)
# output_style = :expanded   #通常のアウトプットスタイル
# output_style = :nested     #Sassなどのネストを継承したスタイル
# output_style = :compact    #1つのCSSCSSレイクタの設定が1行になるスタイル
# output_style = :compressed #コメントを取り除いて完全に圧縮するスタイル

# Compassで拡張された関数で使うURLを、絶対パスか相対パスかを指定(デフォルト:false[絶対パス])
# relative_assets = true

# デバッグ用のコメントを出力するか(デフォルト:true[出力する])
# line_comments = false

# SCSS記法とSass記法の切り替え
# Sass記法を利用する場合は、以下のコメントを外してください
# preferred_syntax = :sass

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

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

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

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

コンパイルして動作確認

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

SCSSの記入

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

@charset "utf-8";
/*!
  Theme Name: WP-Theme
  Author: yhira
*/
$theme_color: red;
$link_color: blue;
$text_color: #111;
$theme_fonts: "Hiragino Kaku Gothic ProN",Meiryo,sans-serif;

body{
  font-family: $theme_fonts;
}

header{
  background-color: $theme_color;
}

#main{
  margin: 10px;

  p{
    color: $text_color;
  }

  a{
    color: $link_color;
    text-decoration: none;
  }

  img{
    border: 1px solid #eee;
  }

}

#sidebar{
  margin: 5px;

  a{
    color: $link_color;
    text-decoration: underline;
  }
}

footer{
  background-color: $theme_color;
}

注意点

@charset "UTF-8";

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

Invalid Windows-31J character

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

/*!
  Theme Name: WP-Theme
  Author: yhira
*/

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ファイルが作成された

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

@charset "utf-8";
/*!
  Theme Name: WP-Theme
  Author: yhira
*/
/* line 10, style.scss */
body {
  font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

/* line 14, style.scss */
header {
  background-color: red;
}

/* line 18, style.scss */
#main {
  margin: 10px;
}
/* line 21, style.scss */
#main p {
  color: #111;
}
/* line 25, style.scss */
#main a {
  color: blue;
  text-decoration: none;
}
/* line 30, style.scss */
#main img {
  border: 1px solid #eee;
}

/* line 36, style.scss */
#sidebar {
  margin: 5px;
}
/* line 39, style.scss */
#sidebar a {
  color: blue;
  text-decoration: underline;
}

/* line 45, style.scss */
footer {
  background-color: red;
}

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

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

まとめ

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

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

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

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