読者です 読者をやめる 読者になる 読者になる

@thorikiriのてょりっき

@thorikiriがWebとかAndroidとかの技術ネタや本を読んだブログです

Windows環境にSASS、COMPASSをインストールする。

css

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とかでググればいいよ