menu

Web制作のTipsとかアレコレ。

SASS + Compass をSublime Text 2 で利用するセッティングでちょっとハマッたので作業録。

2013.09.15

CSS3をバリバリ書き始めて、どうしても面倒だしメンテナンスも大変だしってことになってきたので、ようやくというか今さらというか、SASSに手を付けました。
結果、感動www

ということで、昨晩ドットインストールでSASSに入門して、それからWindows7とMBAにSublimeText2用の環境構築をしました。
ところがMacの方で思わず苦労したので、作業録を残しておこうと。ついでと言ってはナンですが、導入の最初からの参考リンクを貼っていこうという次第です。

結果的にいくつかのサイトを参考にしたんですが、ここだけで十分だと思いました。
コーダー必見、SCSS・Compassで開発効率アップ|Sublime Text 2でコンパイル編

  1. Rybyのインストール
  2. インストールの確認とコンソール
  3. Sassのインストール
  4. Compassのインストール
  5. Sublime Text 2とパッケージをインストール
  6. プロジェクトの作成
  7. コンフィグファイルの作成
  8. コンパイルの実行

ここまで網羅してくれてます。ゆりかごから墓場まで。

で、いくつか注意点というか気付いた点を。

この参考サイトではRubyのあとにSass、Compassと順にインストールしていってますが、他のいくつかのサイトでは「CompassにはSassが含まれているのでCompassをインストールすれば良い」と書かれています。確かにそうなんですが、昨晩私がインストールした時点では、Compass(0.12.2)に含まれるSassがバージョン3.2.1で、最新(3.2.10)ではなかったので注意。このサイトの通り、Sass=>Compassの順に別にインストールした方がいいと思います。

あとは(7)のconfig.rbの作成ですが、

http_path = "/"
css_dir = "css"
sass_dir = "scss"
output_style = :nested
line_comments = false

4行目はcssに書き出した時のネストの状態で、これは完全に好みなんですけど私は最終的にタブられてない方が好きなので「output_style = :expanded」にしました。

さて、Sublime Text 2 にインストールするパッケージですが、ここで紹介されているもの+「Sass Build」の5つを一気にインストールしちゃいます。

  • Compass
  • Sass
  • SASS Build
  • SCSS
  • SCSS Snipets

で適当なSCSS打ち込んでみてコンパイルしてあっさり完了。

本当にあっさり完了しました。Windowsの方は。

実はMacで少しハマりました。

ちなみにMBA 2012 でOSは10.7.5。

こちらの方も同様にやっていって、いざコンパイルしようとcommand+B!するとエラー。

/bin/sh: compass: command not found

、つまり「Compassなんて見つからないんですけど」といわれちゃいました。

ということでググって見つけたココ。
Sublime Text 2を使ったCompassのコンパイルでハマったところ

からのココ。
How to configure Compass build with rbenv in Sublime Text 2?

の通りに。で、解決。まああっさりといえばあっさりなんですけど。

ただ、最近Windows版を使うことが多いので、Mac版のSublimeText2のメニューでとまどった。なんかね、結構違うんですよ。

パッケージの設定関係なんで、Preferncesメニューを見るためにトップのバーにカーソルを運んだら・・・無い。Toolsの中にもない。どこにもない。Windows版だと、PreferncesはProjectとHelpの間、Mac版のWindowの場所にあるんですけど(バージョンによって違うかもしれない)、Mac版で探して探して遂に見つけたのがいっちばん左。アップルメニューの横ですな。

まあそれで結局PreferncesのPackageSettingsの中にはCompassの独立メニューがなかったので、BrowsePackagesでフォルダ開いてCompassフォルダからSublimeにドロップして編集。

で、Sublime Text 2を再起動して、めでたく構築完了。

とここまでやって疲れ果てました。

それにしても、Sassをはじめてやってみたけど、感動。なんか難しそうだしSassやらSCSSやらLESSやらCompassやらわけ分からんし、第一フレームワークってそれそのものを勉強するのに時間がかかるイメージがあるので敬遠してたんですけど。今までやってなかったのを後悔した次第。

一応、ドットインストールで2時間ぐらい勉強して自分用のチートシートを作ってみたので、あとはオフィシャルのリファレンスとかがあればバッチリですね。関数も分かりやすく、PHPやらJsやら、何かしらのスクリプト言語やプログラミング言語をかじってたらまったく問題ないですし。

今日からコーディングがもっと楽しくなりそうです。

Comments

please leave your comment...

▲ Page Top