イナヅマTVログ

Sass+Compass+TextMate 2+SASS BundleでCSSコーディング

| 0件のコメント

Sass
http://sass-lang.com/

Compass
http://compass-style.org/

Sass はコマンドラインCSSフレームワーク。
Compass はSassを便利にする機能満載。

どちらも ruby gem、それぞれのサイトに説明があるのでインストールは簡単。

コマンドを覚えなきゃなのはGUI人間には辛いとこ。
Compassの便利な機能も名称が長過ぎてeditorに入力するのがメンドイ。

Sass+Compassで充分便利だけどもっとラクしたい。

Compass.app
コマンドラインから解放してくれる Compass.app を購入した、$7.00。
http://compass.handlino.com/

TextMate 2+SASS Bundle
TextMate
1を購入して2へ無償アップグレードしましょう。
ユーロ安だし超お買い得。

sass-tmbundle

TextMate 2にSASS BundleをインスコするとCSSコーディングが異次元の便利さ。
zen-codingも便利だったけど勝負にもならない感じ。

■プロジェクト
コーディング・フォルダを作成
Compass.appを起動し新規プロジェクトを「上記フォルダ内」に作成

必要ならCompass.appの .rb ファイルを編集
CSSを書き出すフォルダ変更するために css_dir を書き換えてます。

sass フォルダの .scss を編集すれば .css を css_dir で指定したフォルダに書き出してくれる。

Compass には 960, blueprint などの CSS Framework も入ってて Grid な人にはたまらないでしょう。

update 2013-06-17
scss.tmbundle はTextMate 2から標準になってるようです。
環境設定からインストールできます。

githubでもソースが公開されています。
https://github.com/MarioRicalde/SCSS.tmbundle

コメントを残す

必須欄は * がついています