Sublime Text 2のビルドにWindows環境のSassを追加する


えぇ、またSublime Textです。今回はWindowsにRubyをインストールする所から始め、Sublime Text 2上でビルドしてSassを出力する所までをメモしておきます。しかしながら昨今はnode.jsやらRubyやら、Gitやらプロンプト(ターミナル)を使用する機会が増えてきました。バックエンド開発がメインに使うなら頷ける物の、フロントエンドにも必要とされる技術として考えると、フロントエンドエンジニアと言う呼び名は調子が良過ぎると言うか、フロントエンジニア=マークアップエンジニア+((デザイナ+バックエンド+フラッシャー+アプリ開発)/4)みたいな…。何か軽く納得いかない感、でも覚えると楽だし楽しいみたいな複雑。

Rubyのインストール

下記URLよりインストーラーをDLしてインストールする、その際オプションで環境変数PATHにチェックをしておく。*.rbファイルの関連付けはお好みで。
URL:http://rubyinstaller.org/

CassとCompassのgem(モジュール)のインストール

プロンプトから以下の順に実行する
set LANG=ja_JP.UTF-8
gem update --system
gem install sass
gem install compass

汎用的なconfig.rbを作成しておく

主に毎回必要になるので、テンプレートファイルの中にブチ込んでおくのがマストかと。
参考:http://qiita.com/debiru/items/28d54b5c1e295d880cd3
考え方次第では選べるテンプレート自体を出力してしまう物を作っておけば良いのであっ…

Sublime Text 2に以下をインストール

Sass
SCSS
Sass Build → Compass使うなら不必要かも?
Compass → Sass Build使うなら不必要かも?

あとはビルド設定して使うだけ

「ツール - ビルドシステム」からCompassを選択するなり、Sassを選択するなり。
Ctrl+Bでビルドする。もしくはSublimeOnSaveBuild をインストールし、保存時にビルド出来る様にする事も可能とか。

出力されたソースコードが気に入らない

凄い改行されてるとか、インデントかスペースなのは嫌だとか、
ruby/lib/ruby/gems/2.0.0/gems/sass-3.2.12/lib/sass/tree/visitors
にあるto_cssのtab_strとか、end_propsとかをゴニョゴニョと。
Related Posts Plugin for WordPress, Blogger...