Windows環境でSass開発環境を構築する(応用編)

どうもこんばんはー!
本日は前回の「Windows環境でSass開発環境を構築する(基本編)」に引き続いて応用編を紹介しようと思います。

まずはじめに

基本編同様Windows8 64bit環境を前提に説明していきます!

本日のメニュー

  1. Sublime Text2をインストールする
  2. Package Controlをインストール
  3. 必要なパッケージをインストールする
  4. プロジェクトディレクトリを作成する
  5. Compassの設定ファイル「config.rb」を設定する
  6. Sassファイルを作成してコンパイルする
  7. あとがき

Sublime Text2をインストールする

Sassの開発エディタとしてSublime Text2を利用します。
(※beta版のSublime Text3もあるのですが、コンパイルに必要なCompass Build SystemがないためSublime Text2を利用します。)

ということで、以下のサイトから環境に合わせWindows 64bit版を選択しダウンロードします。

Sublime Text2ダウンロード

ダウンロードが完了したら、インストーラを実行してインストールします。

Package Controlをインストールする

Sublime Text2をインストールしたら、さっそく起動します。

起動したらまずSublime Textを色々使いやすく拡張できるパッケージをインストールできるPackage Controlをインストールします。

ショートカットコマンド【Ctrl+`】でコンソールを開き、以下のコマンドを入力しEnterを押しインストールします。

import urllib2,os,hashlib; h = '7183a2d3e96f11eeadd761d777e62404e330c659d4bb41d3bdf022e94cab3cd0'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler()) ); by = urllib2.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); open( os.path.join( ipp, pf), 'wb' ).write(by) if dh == h else None; print('Error validating download (got %s instead of %s), please try manual install' % (dh, h) if dh != h else 'Please restart Sublime Text to finish installation')

ちなみに上記コードは以下のサイトから入手できます。

Package Control

必要なパッケージをインストールする

Package Controlのインストールが完了したら今度は【Ctrl+Shift+P】でコマンドパレットを開き、検索窓でPackage Control: Install Packageを選択し、さらに検索窓で以下のパッケージを検索して、それぞれインストールします。

必要なパッケージ

  • Sass
  • Scss
  • Sass Build
  • Compass

プロジェクトディレクトリを作成する

必要なパッケージのインストールが完了したら任意の場所にプロジェクトディレクトリを作成します。

サンプルプロジェクトディレクトリ

  • 例:C:\someproject

作成したらそのディレクトリをSublime Text2にドラッグ&ドロップして読み込みます。

Sublime Text2はプロジェクトごとに複数のディレクトリを読み込むことができるのでとても便利です。

Compassの設定ファイル「Config.rb」を設定する

続いてプロジェクト内のSassディレクトリ、CSSディレクトリのパスなどを設定するconfig.rbを作成・編集します。

先ほど作成したプロジェクトディレクトリのルートにconfig.rbを作成し、以下のコードを貼り付けます。

http_path = "/"
css_dir = "stylesheets"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts"

上記のコードは以下のものを拝借してるので、こちらをそのまま使用することも可能です。

config.rb

上記のコードの設定内容の意味や、細かい設定については以下のサイト様が参考になります。

Sassファイルを作成してコンパイルする

「config.rb」の設定が完了したら、Sassファイルを作成します。

「config.rb」の「sass_dir」のパスの設定通りにプロジェクトのルートに「sass」ディレクトリを作成し、その中にSassファイルを作成します。

Sassファイルの作成方法については「基本編」の記事を参考にどうぞ。

Sassファイルを作成したら、そのファイルをSublime Text2で開いて、メニューからTools>Build System>Compassを選択し、
開いたファイル上で【Ctrl+B】でコンパイル(Build)します。

そうすると「config.rb」で設定したCSSディレクトリ「stylesheet」が作成され、その中にコンパイルされたCSSファイルが作成されます。

以上、Windows環境でSublime Text2を利用したSass開発環境の応用編でした。

あとがき

Sublime Text2はワタクシもRuby on Railsの開発をする際に知ったエディタなのですが、
パッケージをインストールすることで様々な言語にも対応できるようなのでとても便利だなと感じています。

今回紹介したSassについても、「コマンドプロンプトでいちいちコンパイルするのめんどくさいなー。もっといい方法ないかなー。」ということで、調べた結果行き着いた方法でした。

他にももっと手軽に開発できる環境があれば是非コメントをお願いします。