ITコンサルの日常

ITコンサル会社に勤務する普通のITエンジニアの日常です。

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!

超意訳

Compassは、スタイルシートのファイルサイズを小さくし、Webサイトのメンテナンスを容易にするための、Sassスタイルシート言語を使ったスタイルシート製作ツールです。Compassは、CSSフレームワークのプレゼンテーションクラス名を使わずに、最高品種のCSSフレームワークの移植を提供します。これはスタイルシートに関する必見の新しい考え方です。

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が生成されて、正しく動作していますね!