前回ruby環境の構築を完了させておいたので、先人のお知恵を拝借しながら早速compassをインストールしてみたいと思います。
参照サイト・エントリー
compass
CSS書くならcompass使った方がいいよ。SASS使ってる人なら特に。
お約束
参照は自己責任でお願いいたします。
やったこと
compassのインストールはgemから行うようなので、前準備としてStart Command Prompt with Ruby を立ち上げておきます。
アップデートを実施。
C:\> gem update --system Updating rubygems-update Fetching: rubygems-update-1.8.12.gem (100%) Successfully installed rubygems-update-1.8.12 Installing RubyGems 1.8.12 RubyGems 1.8.12 installed unable to convert U+0160 from UTF-8 to Windows-31J for History.txt, skipping unable to convert U+0160 from UTF-8 to Windows-31J for History.txt, skipping == 1.8.12 / 2011-12-02 * Bug fix: * Handle more cases where Syck's DefaultKey showed up in requirements and wasn't cleaned out. ------------------------------------------------------------------------------ RubyGems installed the following executables: C:/Ruby193/bin/gem RubyGems system software updated
compassをインストール
C:\>gem install compass Fetching: sass-3.1.11.gem (100%) Fetching: chunky_png-1.2.5.gem (100%) Fetching: fssm-0.2.7.gem (100%) Fetching: compass-0.11.5.gem (100%) Successfully installed sass-3.1.11 Successfully installed chunky_png-1.2.5 Successfully installed fssm-0.2.7 Successfully installed compass-0.11.5 4 gems installed Installing ri documentation for sass-3.1.11... Installing ri documentation for chunky_png-1.2.5... Installing ri documentation for fssm-0.2.7... Installing ri documentation for compass-0.11.5... Installing RDoc documentation for sass-3.1.11... Installing RDoc documentation for chunky_png-1.2.5... Installing RDoc documentation for fssm-0.2.7... Installing RDoc documentation for compass-0.11.5...
インストールが完了したらプロジェクトを作ります「compass create プロジェクト名」と指定すればいいみたいです。
例えば560daysというプロジェクトを作る場合はこんな感じ
C:\>compass create 560days directory 560days/ directory 560days/sass/ directory 560days/stylesheets/ create 560days/config.rb create 560days/sass/screen.scss create 560days/sass/print.scss create 560days/sass/ie.scss create 560days/stylesheets/ie.css create 560days/stylesheets/print.css create 560days/stylesheets/screen.css ********************************************************************* Congratulations! Your compass project has been created. You may now add and edit sass stylesheets in the sass subdirectory of your proj ct. 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: * Website: http://compass-style.org/ * 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) o your webpage: ‹head› ‹link href="/stylesheets/screen.css" media="screen, projection" rel="styleshe 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="styleshe t" type="text/css" /› ‹![endif]--› ‹/head›
scssファイルを作成
C:>compass compile /560days/sass/ You must compile individual stylesheets from the project directory.
ファイルを保存する都度ファイル(下記の例だと「style.scss」)のコンパイルを実施する設定。
C:\>compass watch /560days/sass/style.scss You must compile individual stylesheets from the project directory.
style.scssと同じディレクトリにコンパイルされたstyle.cssがあることを確認。
とりあえず環境の構築はこれで出来たっぽいので、コーディング規約などを調べながら実際にCSSを書いてみようと思います。