code up

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Sass+compassをEclipse環境にインストール

Sassをインストールした。ついでにcompassもインストールした。結論: 便利!

その前に以前のエントリ - 『HSS(CSSコンパイラ)を使った感想』にあるように、HSSというCSSコンパイラを試してみたが、互換性が足りない、かつ構文に制限が多いという理由から諦めた。単純なexeなので起動(特にAntからの実行)がし易いと思ったからだったが結局は無駄足となってしまった。

HSSがダメとなると他には(Google先生が最初の方に教えてくれるのは)lessSass+compassとなる。

lessはnpm(node.js用のパッケージマネージャ)、Sass+compassはgem(RubyGems; Ruby用のパッケージマネージャ)でインストールする。

* yumとかapt-getとかqpkg(ちょっとマイナー)のようなパッケージ管理システム、Javaで言えばmavenやIvyなど、Linuxという特定の分野だけだったものがいつの間にか広い範囲で整備されている。もう窓の杜の時代じゃないんだなぁ、と(涙)。未だにwgetでApacheをコンパイルしている私って・・・(哀。
* Sassのサイト、O'Reilly本を錯覚させる。モノトーンの画に単色背景、文字色白というのが・・・。面白い恋人みたいに怒られたりはしないだろうが、ある意味斬新。

と話が逸れたが、インストールとEclipse環境でSass+compassを使って(ant経由で)簡単なcssを作るまでをまとめる。チーム開発でクリーンなPCからセットアップを行う場合、Eclipse以外にRubyをインストールしなければならないため、PATH環境変数を設定したりインストールパスをbuild.propertiesに書き出すなどの手順が必要となる。今回はbuild.propertiesは登場せずハードコーディングしている。

環境はWindows 7 64bit Professional。

Javaのインストール

最新はJava2 SEの7(u2)であるが、まだ7を使う予定はないため今回はJava SE 6 Update 30をインストール。

EclipseはJREでも動作するが、Antを使う場合などにはJDKにしかないライブラリを参照することがあるため、JDK版をダウンロードする(JAVA_HOMEはJDKのパスを指定する)。

Eclipseのインストール

今だとIndigo(3.7.1)。J2EE開発がメインなのでEclipse IDE for Java EE Developersをダウンロードする。

プラグインはいつものプロパティエディタとSVN関連(Subversive SVN Connectors, Subversive SVN Team Provider, SVNKit Immplementation)をインストール。

続いてSass Editorを備えるAptana Studio3のプラグイン版をインストールする。Aptana Studio3というのはEclipseベースのJavaScript/HTML5/CSS3/Ruby/Rails/PHP/Pythonの開発環境である。同様の機能を提供するEclipseプラグインを提供しており今回はそのプラグイン版を利用する。

『DOWNLOAD APTANA STUDIO 3』を押し、表示された画面で『Eclipse Plug-in Version』を選択して再度『DOWNLOAD APTANA STUDIO 3』を押すとアップデートサイトのURLが表示される。

以前はRadRailsという名前でSass Editor等の機能を提供していたが、バージョンが3になってひとつのプラグインに統合された

  1. Eclipse上でHelp→Install New Software...
  2. Work with:に『http://download.aptana.com/studio3/plugin/install』を入力→Add
  3. Nameを適当に入力して(私はいつもURLを入力)→OK
  4. 『Group items by category』にチェックを入れ→『Aptana Studio 3』を選択してNextを押す→(省略)→Eclipse再起動

    『Group items by category』のチェックを外すとプラグインを個別にダウンロード可能。Sassエディタだけ必要であれば『Aptana RadRails』だけのチェックでもいけるかもしれないが未確認
  5. 再起動するとGitのインストール先を聞かれるがGetting Started GuideによるとWindowsの場合はPortableGitを選択することを推奨しているのでPortableGitを選択する

    Git is required because it is used internally to update your scripting environment. On Windows, we recommend PortableGit from msysgit because we also require its bash shell for executing commands. If you don't have msysgit installed, Studio 3 will offer to install it for its own internal use.
  6. SVNからチェックアウト、既存プロジェクトの追加、新規プロジェクトの作成、などを環境に応じて行う

Rubyをインストール

cygwin環境もあるが、せっかくWindows用のインストーラー(1.9.3)があるので、そっちを使うことにした。

コマンドラインからも使うので『Add Ruby executables to your PATH』と『Associate .rb and .rbw files with this Ruby installation』(こっちはなんとなく)にはチェックを入れてインストール。

インストール後はコマンドプロンプトを起動し、場所はどこでもいいので次のコマンドを実行。

>ruby -v ruby 1.9.3p0 (2011-10-30) [i386-mingw32] >gem update --system Latest version currently installed. Aborting. >gem install sass (省略) >gem install compass (省略) >sass -v Sass 3.1.11 (Brainy Betty) >compass version Compass 0.11.5 (Antares) (省略)

* 次のようなメッセージが出た場合、Sの上にV(CARON; キャロン)がある文字という日本語に無いUnicode文字を日本語の文字コード(Windows-31J)に変換しようとしているだけなので基本無視して良い。

unable to convert U+0160 from UTF-8 to Windows-31J for History.txt, skipping

これでインストールが完了。

Eclipse環境にcompass/Sassプロジェクトを作成する

インストール後はコマンドプロンプトを起動し、WebContentの場所まで移動する。

>cd [プロジェクトのフォルダ]\WebContent >compass create --sass-dir "sass" --css-dir "css" --javascripts-dir "js" --images-dir "images"

* createをbuild.xmlでやってみた記事はこちら。

上記コマンドではsass/js/css/imagesのフォルダを指定し実行しているが、省略可能である。コマンドラインのパラメータについてはTell us about your project and we'll help you get it set up:で作成することが可能。

実行後、headタグに書くタグが表示されるので、デフォルトのファイル名で構わなければ控えておこう。

WebContentのフォルダでcompass watchと実行すると、変更を監視して変更があれば随時コンパイルを行ってくれる。今回はEclipseのAnt Builderでコンパイルするため、Eclipse外で作業する時以外はcompass watchは使用しない。

Eclipseの設定変更

全てのファイルはUTF-8で作成するため、開くファイルの文字コードをUTF-8に変更しておく。下記は*.sassファイルの文字コード指定方法。

  1. Preferences→General→Content Types
  2. 右のペインでTextを展開して『Sass Source』を探す
  3. Default encoding:で『utf-8』と指定し、Updateを押した後OKを押す

次に作成する*.sassファイルの先頭に『@charset "utf-8";』と指定するとソースファイルをUTF-8としてコンパイルするようになる。ダブルクォートで囲むことに注意。

最初シングルクォートで'utf-8'としていたが次のようなエラーが出てコンパイルに失敗していた。
Encoding::UndefinedConversionError on line ["[数字]"] of C: "\x[16進数コード]\x[16進数コード]" from Windows-31J to UTF-8 (Line [数字]: Invalid Windows-31J character "\x[16進数コード]")

build.xmlの作成

こんな感じで作成。WebContent\config.rb(compass用のプロジェクト設定ファイル)でoutput_style = :compressedとしてあり、build.xml-s(--output-style)expandedとしている。これはcompass/Sassの構文に慣れてくるまでは出力されるcssを確認し、慣れてきたら圧縮しようと考えているからである(output-styleは他にはnestedcompactが選べる)。

build.xmlを右クリックしてRun As→Ant Buildでテスト実行しよう(今回の場合defaultターゲットなので...がない方で)。エラーが出なければ成功。

Ant Builderの作成

最後にAnt Builderを用意して、compassをEclipseから実行できるようにする。compass watchだとコンパイルで出来上がった*.cssファイルを再読込するためにRefreshを実行しなければいけないがAnt Builderであればコンパイル後に自動的にRefreshするように設定することができる。

  1. Project→Properties→Builders
  2. New→Ant Builder
  3. Name:欄に適当な名前を入力。例: compass
  4. Buildfile: は先ほど作成したbuild.xmlを指定
  5. Base Directory: はbuild.xmlのbasedirと同じ場所を指定
  6. Refreshのタブで『Refresh resources upon completioin.』にチェック。Refreshを行う範囲を選ぶ。私は面倒&負荷を感じないので『The entire workspace』
  7. Targetsタブでは『After a "Clean":』と『Manual Build:』で実行するように設定(デフォルト)。『Auto Build:』を選ぶとやたらantが開始されてしまうのでセットしていない。『After a "Clean":』はBuild Automaticallyがチェックされていると呼ばれないようである
  8. Ctrl+BもしくはProject→Build Allでantが起動する(Console Viewに結果が表示される)。

次の記事にも書いたが、コンパイル時にエラー'error sass/screen.scss (Line 3: Invalid Windows-31J character "\xE3")'が出る場合は環境変数にLANGを加える(ja_JP.UTF-8とかen_US.UTF-8)。

この場合、分離されたJREでなければいけないので、JREタブでSeparete JRE等を選ぶ。

いよいよコンパイル!

scssフォルダにあるscreen.scssなどを編集していこう。違うファイル名としたい場合はscssフォルダにscssの拡張子でファイルを作成すれば自動的にcssフォルダにコンパイルしてくれる。

例えばこんな感じのものが

次のように変換される。ブログ用にcompileオプションに--no-line-comments(行コメントの除去)をつけた上でコンパイルした。

CSS vs Sass/compass

今日一日触ってみただけだが、Sass+compassの魅力について通常のcssと比べてみたいと思う。

  • //コメントがかける
  • ネストできる。上記例ではhtmlの中にbodyを書くことで視覚的に理解がし易くなっている
  • (cssとの比較でないが)今までのcssがそのままコンパイルできる。出力ファイルは変化ないがエラーになるHSSに比べると、とてもありがたい機能
  • 変数・関数・条件分岐・リスト・継承などを使ったプログラミングが行える
  • mixin(ミックスイン; Javaだとinterfaceが指定する実装部分をAOPを使ってinjectionすれば同義になるとのこと、お堅いJavaで無理にmixinする必要ないが・・・。)
  • compassが用意する便利なフレームワークが使える。元々compassが提供するborder-radiusが使いたかったのが動機であった
  • デバッグや警告表示などの支援機能がある

less vs Sass/compass

lessは触ってないので比較できないが、比較しているページはここ(Sass/Less Comparison)とかここ(CSS拡張メタ言語「SCSS(Sass)」と「LESS」の比較)など。

compassのようなフレームワークが現れればSassを上回るらしい、という記事があるので単体の能力ではless > Sassのようである。ちなみにlessはSassにインスパイアされて開発されたとのこと。

結論

最初にも書いたが、気に入った!今まで使ったこなかったのを後悔するくらい。

関連記事
タグ:CSS Sass compass Eclipse
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。