Compass導入 on Windows
なんでCompass?
これもSass同様、Sencha Touchで使われている。
というか、むしろSencha Touchで使われているのはCompassで、
Sassではないか。。
- | 文法 | 用途 |
Sass | scss | 1ファイルの変換 |
Compass | scss | 複数ファイルの変換+ビルトインモジュール(コンフィグ変数とmixins) |
ってことなんで、Sassを理解していれば、
Compassは、環境だけ理解すれば良いってことなはず。
とりあえず、緑色のKitchen Sink on Sencha Touchを見るのが目標ってことで。
Compassってなんぞや
原文 Compass Documentation | Compass Documentation
Compass is a stylesheet authoring tool that uses the Sass stylesheet language to make your stylesheets smaller and your web site easier to maintain. Compass provides ports of the best of breed css frameworks that you can use without forcing you to use their presentational class names. It's a new way of thinking about stylesheets that must be seen in action!
Rubyのインストール
Sass Tutorial - 0: Ruby and Sass導入 on Windows参照。
ActiveScriptRuby and Other packagesから、
Ruby-1.9.1-p429 Microsoft Installter Package(2010/07/021 version 28523) 16,896,512バイト
ってのをダウンロードして、インストールすればOKです。
Compassのインストール
>gem install compass WARNING: File 'C:/Program Files/Ruby-1.9.1/lib/ruby/gems/1.9.1/specifications/h aml-3.0.24.gemspec' does not evaluate to a gem specification ERROR: While executing gem ... (ArgumentError) marshal data too short
なんでやろ。。
いったんSass消すか。
>gem uninstall haml Remove executables: haml, html2haml, sass, css2sass, sass-convert in addition to the gem? [Yn] Y Removing haml Removing html2haml Removing sass Removing css2sass Removing sass-convert Successfully uninstalled haml-3.0.24
再びCompassのインストールを試みる。
>gem install compass Successfully installed haml-3.0.24 Successfully installed compass-0.10.6 2 gems installed Installing ri documentation for haml-3.0.24... Updating class cache with 1392 classes... ERROR: While executing gem ... (NoMethodError) undefined method `[]' for false:FalseClass >
なんでやろ。。
今度は別の原因で失敗。
でも、ドキュメントのインストールに失敗しただけだから無視する。
確認
>compass version ファイル名、ディレクトリ名、またはボリューム ラベルの構文が間違っています。 >
これが出たときは、$RUBY_HOME/bin/compass.batを修正。(ダブルクォートを1個消す)
(参考) Windowsの 1.9.1 で gem で racc - Rubyとか Illustratorとか SFとか折紙とか
>compass version Compass 0.10.6 Copyright (c) 2008-2009 Chris Eppstein Released under the MIT License. >
スタンドアロンプロジェクトの作成
>compass create myproject directory myproject/ directory myproject/src/ directory myproject/stylesheets/ create myproject/config.rb convert screen.sass create myproject/src/screen.scss convert print.sass create myproject/src/print.scss convert ie.sass create myproject/src/ie.scss exists myproject/stylesheets compile myproject/src/ie.scss create myproject/stylesheets/ie.css compile myproject/src/print.scss create myproject/stylesheets/print.css compile myproject/src/screen.scss create myproject/stylesheets/screen.css ********************************************************************* Congratulations! Your compass project has been created. You may now add and edit sass stylesheets in the src subdirectory of your projec t. Sass files beginning with an underscore are called partials and won't be compiled to CSS, but they can be imported into other sass stylesheets. You can configure your project by editing the config.rb configuration file. You must compile your sass stylesheets into CSS when they change. This can be done in one of the following ways: 1. To compile on demand: compass compile [path/to/project] 2. To monitor your project for changes and automatically recompile: compass watch [path/to/project] More Resources: * Wiki: http://wiki.github.com/chriseppstein/compass * Sass: http://sass-lang.com * Community: http://groups.google.com/group/compass-users/ To import your new stylesheets add the following lines of HTML (or equivalent) t o your webpage: <head> <link href="/stylesheets/screen.css" media="screen, projection" rel="styleshee t" type="text/css" /> <link href="/stylesheets/print.css" media="print" rel="stylesheet" type="text/ css" /> <!--[if IE]> <link href="/stylesheets/ie.css" media="screen, projection" rel="styleshee t" type="text/css" /> <![endif]--> </head> >
mate myproject
mateコマンドなんてものはWindowsにはないので、ただし書きを読んでみる。
原文
If you don't have TextMate, substitute the mate myproject part with the text editor of your choice. Edit the *.scss files in the sass directory. These files are yours and you can change them as you see fit, delete them, make new ones, etc. Compass will automatically compile them into css in the stylesheets directory whenever they change.
超意訳
もしTextMateをインストールしていないなら、mate projectの部分をお使いのテキストエディタで置き換えてください。sassディレクトリにある*.scssファイルを編集してください。これらのファイルはあなたに合うように変更し、削除し、新しく作成できます。Compassは*.scssファイルに変更があったとき、自動的に*.scssファイルをコンパイルし、スタイルシートディレクトリに格納します。
ということなので、myproject/src/*.scssを、自分の使っているテキストエディタで編集すれば良いらしい。
なので続き。
>compass watch myproject >>> Compass is polling for changes. Press Ctrl-C to Stop.
試しにsassファイルを置いてみる
Sassのところで作ったNesting.sassを、myproject/srcにコピーしてみる。
>>> Change detected to: myproject/src/Nesting.scss create myproject/stylesheets/Nesting.css
結果
>tree /f │ compass0.txt │ └─myproject │ config.rb │ ├─.sass-cache │ ├─7e69d7c3a70c05699963b7669a4c2412f6e7ae21 │ │ _utilities.scssc │ │ │ ├─80759fe8d184f2a4ce909d586e396ba2fff6957f │ │ _reset.scssc │ │ │ └─ad22d8237369cca6ce9d5e14b86969f0016bc9cd │ ie.scssc │ print.scssc │ screen.scssc │ ├─src │ ie.scss │ Nesting.scss │ print.scss │ screen.scss │ └─stylesheets ie.css Nesting.css print.css screen.css >
myproject/stylesheets/Nesting.cssが生成されて、正しく動作していますね!