SASSはgem経由でインストールしますので、予めrubyとgemを使えるようにしておく必要があります。
環境
環境を確認してみます
> ruby -v ruby 2.0.0p247 (2013-06-27) [x64-mingw32] > gem -v 2.0.3
SASSのインストール
インストールは次のコマンドで。プロキシ環境では予め設定しておきましょう*1。
COMPASSをインストールすれば、SASSも入るらしいので、この手順は飛ばしてもOKです。
> gem install sass Fetching: sass-3.2.10.gem (100%) Successfully installed sass-3.2.10 Parsing documentation for sass-3.2.10 Installing ri documentation for sass-3.2.10 1 gem installed
これでインストールが出来ましたので、確認してみます。
> sass -v Sass 3.2.10 (Media Mark)
これだけですね。
簡単なファイルで試してみます。
#wrapper padding: 0 margin: 0 .container background-color: #f9f9f9
こんなsample.sassファイルを作成し、コマンドを打って確かめてみます。
> sass sample.sass sample.css ||> これでOK、sample.cssを確認してみると次の通りです。 >|| #wrapper { padding: 0; margin: 0; } #wrapper .container { background-color: #f9f9f9; }
COMPASSのインストール
COMPASSをインストールします。こちらもgemでインストールするので、コマンド一発ですね。
> gem install compass Fetching: chunky_png-1.2.8.gem (100%) Successfully installed chunky_png-1.2.8 Fetching: fssm-0.2.10.gem (100%) Successfully installed fssm-0.2.10 Fetching: compass-0.12.2.gem (100%) Successfully installed compass-0.12.2 Parsing documentation for chunky_png-1.2.8 Installing ri documentation for chunky_png-1.2.8 Parsing documentation for fssm-0.2.10 Installing ri documentation for fssm-0.2.10 Parsing documentation for compass-0.12.2 Installing ri documentation for compass-0.12.2 3 gems installed
これでインストールできたので、確認してみます。
> compass -v Compass 0.12.2 (Alnilam) Copyright (c) 2008-2013 Chris Eppstein Released under the MIT License. Compass is charityware. Please make a tax deductable donation for a worthy cause: http://umdf.org/compass
はい、大丈夫ですね。
COMPASSを試してみる
設定ファイル等書く必要があるのですが、コマンド一発でひな形を作ってくれるので、それを利用してみます。
> compass create directory sass/ directory stylesheets/ create config.rb create sass/screen.scss create sass/print.scss create sass/ie.scss create stylesheets/ie.css create stylesheets/print.css create stylesheets/screen.css ********************************************************************* Congratulations! Your compass project has been created. You may now add and edit sass stylesheets in the sass subdirectory of your project. 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) to your webpage: <head> <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" 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="stylesheet" type="text/css" /> <![endif]--> </head> >|| はい、出来上がりました。sassフォルダの中に、sassファイルを作っていけばOKです。先ほどのsample.sassを置いて、コンパイルしてみます。 >|| > compass compile create stylesheets/ie.css create stylesheets/print.css create stylesheets/sample.css create stylesheets/screen.css
これでコンパイルできることが確認できましたね。ただ、毎回コンパイルするのも面倒なので、保存したら自動的にコンパイルするようにしましょう。
> compass watch >>> Compass is polling for changes. Press Ctrl-C to Stop.
または
> compass w >>> Compass is polling for changes. Press Ctrl-C to Stop.
とすればOKです。
COMPASSと言えば、便利なmix-inが使えることですよね。先ほどのsample.sassにborder-radiusでもつけてみましょう。
compassをインポートして、border-radisuをインクルードして保存します。
@import "compass" #wrapper padding: 0 margin: 0 .container background-color: #f9f9f9 @include border-radius()
保存すると、自動的にコンパイルされているはずですので、出来上がったファイルを確認してみます。
/* line 3, ../sass/sample.sass */ #wrapper { padding: 0; margin: 0; } /* line 6, ../sass/sample.sass */ #wrapper .container { background-color: #f9f9f9; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; }
ちゃんと指定されていますね。
*1:gem proxyとかでググればいいよ