SassとCompassを使ってみる

完全に遅れてる感があるけど、今更ながらにSassとCompassの環境を整えてみた。
前置きとかどうでもいい人は「インストール」とかその辺の見出しだけ読んでください。
ぶっちゃけgem installとcompileとかwatchをちょろっとやってるだけなので、既に使いこなしてる人はそっとタブを閉じると時間が節約できます。

Sass

Sass - Syntactically Awesome Stylesheets
http://sass-lang.com/

SassはCSSをもっと便利で効率的にコーディングするための技術。CSSメタ言語。
競合するものとしてLESSやStylusもあるけど、最近はCompassとのセットでSassが流行ってる様子。

Sassを使うとCSSがこんな風に書けるようになる。

/* sass */
$item_color: #3bbfce

#navbar
  width: 80%
  height: 23px
  ul
    list-style-type: none
    li
      float: left
      a
        color: darken($item_color, 9%)

これをコンパイルすると下のようなCSSが生成される。

/* css */
#navbar {
  width: 80%;
  height: 23px;
}
#navbar ul {
  list-style-type: none;
}
#navbar ul li {
  float: left;
}
#navbar ul li a {
  color: #2ca2af;
}

SassはHamlやSlimのようなインデントでネストを表現する。
その他にも変数や関数や継承といったプログラミング的なことができる。

それとSassにはSCSS(Sassy CSS)という普通のCSSを拡張したような記法も用意されている。
というかSCSSはCSS3のスーパーセット的な文法になっていて、普通のCSSはSCSSとしても扱える。ので、とりあえず普通にCSSで書いて、少しずつ慣れていきたい場合はSCSSで書くと良いかもしれない。

ちなみに上記の例をSCSSで書くとこんな感じになる。

$item_color: #3bbfce;

#navbar {
  width: 80%;
  height: 23px;
  ul {
    list-style-type: none;
    li {
      float: left;
      a {
        color: darken($item_color, 9%)
      }
    }
  }
}

細かい機能については公式マニュアルや色々な解説サイトを見てもらうとして、早速使ってみる。

インストール

SassはRubyでできてるのでRubyが入っていることが前提となる。
Macなら標準で入っているもの、Windowsなら別途RubyInstallerなどで入れたものを使う。もちろんrbenvで入れたものでもよい。

Sassはgemになってるので普通にgemコマンドでインストールができる。

sudo gem install sass

これでsassコマンドが使えるようになる。

sass -v
Sass 3.2.10 (Media Mark)

sass -h
Usage: sass [options] [INPUT] [OUTPUT]

Description:
  Converts SCSS or Sass files to CSS.

Options:
                :
                :

コンパイル

sass/scssファイルのコンパイルはこんな感じ。

sass example.sass example.css

出力ファイルを省略すると画面に表示される。

他に--style で出力されるCSSの形式を制御できる。
デフォルトはnestedで、インデントされた感じで出力され、compressedにすると一行で出力される。
ちなみに上の例はexpandedで出力した。

ファイルを編集したら自動的にコンパイルする

--watchというオプションを使用すると、ファイルの変更があったら自動的にコンパイルしてくれるモードで起動ができる。
入力と出力はコロンで区切って指定するので注意。

# ファイルを指定する例
sass --watch example.sass:example.css

# ディレクトリを指定する例
sass --watch sass:css

こちらはファイルだけでなくディレクトリも指定できるので、sass:cssとか指定して起動しておくと便利。
これを起動した状態でsass/example.sassを編集すると、自動的にコンパイルされたものがcss/example.cssに生成される。

とりあえず簡単な使い方はこんなところ。
あとは-hを眺めるとかマニュアルを眺めるとかググるとかして新しい発見をしよう。

Compass

Compass Home | Compass Documentation
http://compass-style.org/

CompassはSassを利用したCSSフレームワーク集(?)で、色々なmixin集とかスプライトの自動生成とか便利な機能が揃ったもの。

例えばこんな感じに書くと…

@import "compass";

.sample {
  @include border-radius(2px);
}

こんな感じのCSSにしてくれる。

/* line 3, ../sass/example.scss */
.sample {
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  -ms-border-radius: 2px;
  -o-border-radius: 2px;
  border-radius: 2px;
}

他にもCSSリセットとかbox-shadowとか色々あって、それらをベンダープレフィクスだけでなくクロスブラウザも考慮して自動的に変換してくれる。

スプライト

さらにCompassを使うとスプライト用画像とそれを使うためのCSSも自動的に生成してくれる。

たとえばこんな感じにアイコンファイルがあったとして、

images/my-icons/new.png
images/my-icons/edit.png
images/my-icons/save.png
images/my-icons/delete.png

こんなscssを書くと…

@import "my-icons/*.png";
@include all-my-icons-sprites;

こんな画像ファイルとcssが生成される。

images/my-icons-s5dcefb3c8d.png

/* line 66, my-icons/*.png */
.my-icons-sprite, .my-icons-delete, .my-icons-edit, .my-icons-new, .my-icons-save {
  background: url('/images/my-icons-s5dcefb3c8d.png') no-repeat;
}

.my-icons-delete {
  background-position: 0 -32px;
}

.my-icons-edit {
  background-position: 0 -64px;
}

.my-icons-new {
  background-position: 0 -96px;
}

.my-icons-save {
  background-position: 0 0;
}

もう頑張って切り貼りしたりスプライト生成サイトを使わなくてもいい！

ほかにもいっぱいいっぱい機能があるけど、それらについては公式マニュアルや色々な解説サイトを見てもらうとして、早速使ってみる。

インストール

CompassもRubyでできてるのでRubyが入っていることが前提となる。というかSassを使ってるので必然的にRubyになる。
Macなら標準で入っているもの、Windowsなら別途RubyInstaller（ｒｙ

Compassもgemになってるので普通にgemコマンドでインストールができる。

sudo gem install compass

これでcompassコマンドが使えるようになる。

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 -h
Usage: compass help [command]

Description:
  The Compass Stylesheet Authoring Framework helps you
  build and maintain your stylesheets and makes it easy
  for you to use stylesheet libraries provided by others.
                :
                :

プロジェクトの作成

CompassはCSSや画像などの他にベースURLやコンパイルの仕方などを設定するファイルがセットになったプロジェクトディレクトリで作業することになる。

compass create example1

するとexample1ディレクトリに初期ファイルが作成されて、簡単な使い方などが表示される。

directory example1/
directory example1/sass/
directory example1/stylesheets/
   create example1/config.rb
   create example1/sass/screen.scss
   create example1/sass/print.scss
   create example1/sass/ie.scss
   create example1/stylesheets/ie.css
   create example1/stylesheets/print.css
   create example1/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]
                    :
                    :

ちなみに--css-dirなどのオプションで出来上がるディレクトリの名前などを指定したりもできる。
compass help createしてみると色々なオプションの説明が出てくる。
またconfig.rbの中にcss_dirなどの項目が書かれているので、ここを変更してもよい。

コンパイル

sassディレクトリの中のファイルを編集して、プロジェクトディレクトリでcompileを実行すると全てのファイルをコンパイルしてcssファイルを作成してくれる。
sassコマンドの時みたいにファイルやディレクトリを指定する必要はない。

compass compile

ファイルを編集したら自動的にコンパイルする

Compassã‚‚watchというコマンドを使用すると、ファイルの変更があったら自動的にコンパイルしてくれるモードで起動ができる。

compass watch

こちらもファイルやディレクトリを指定する必要はない。

とりあえず簡単な使い方はこんなところ。
あとはhelpを眺めるとかマニュアルを眺めるとかググるとかして新しい発見をしよう。

ちなみにコマンドのヘルプはhelpで表示できる。

compass help コマンド(watchとか)

compass statsでCSSの項目を有効にする(2013-09-30追記)

statsコマンドを使うとこんな情報が確認できるが、css_parserが入ってない場合はCSSの項目がDISABLEDになってしまう。
そういう場合は一番最後に書かれているようにcss_parser gemを入れてあげると対応される。

compass stats
unchanged sass/ie.scss
unchanged sass/print.scss
unchanged sass/screen.sass
unchanged sass/screen.scss
| ---------------- | ----- | ---------- | -------------- | ----------- | ------------- | ------------- | -------------- | -------------- |
| Filename         | Rules | Properties |    Mixins Defs | Mixins Used |      Filesize | CSS Selectors | CSS Properties |   CSS Filesize |
| ---------------- | ----- | ---------- | -------------- | ----------- | ------------- | ------------- | -------------- | -------------- |
| sass/ie.scss     |     0 |          0 |              0 |           0 |         271 B |      DISABLED |       DISABLED |
| sass/print.scss  |     0 |          0 |              0 |           0 |         213 B |      DISABLED |       DISABLED |
| sass/screen.sass |     4 |          4 |              0 |           0 |         121 B |      DISABLED |       DISABLED |
| sass/screen.scss |     2 |          1 |              0 |           0 |         341 B |      DISABLED |       DISABLED |
| ---------------- | ----- | ---------- | -------------- | ----------- | ------------- | ------------- | -------------- | -------------- |
| Total (4 files): |     6 |          5 |              0 |           0 |         946 B |             0 |              0 |            0 B |
| ---------------- | ----- | ---------- | -------------- | ----------- | ------------- | ------------- | -------------- | -------------- |

Install css_parser to enable stats on your css files:

	gem install css_parser

css_parserを入れる。

sudo gem install css_parser

compass stats
unchanged sass/ie.scss
unchanged sass/print.scss
unchanged sass/screen.sass
unchanged sass/screen.scss
| ---------------- | ----- | ---------- | -------------- | ----------- | ------------- | ------------- | -------------- | -------------- |
| Filename         | Rules | Properties |    Mixins Defs | Mixins Used |      Filesize | CSS Selectors | CSS Properties |   CSS Filesize |
| ---------------- | ----- | ---------- | -------------- | ----------- | ------------- | ------------- | -------------- | -------------- |
| sass/ie.scss     |     0 |          0 |              0 |           0 |         271 B |             0 |              0 |          271 B |
| sass/print.scss  |     0 |          0 |              0 |           0 |         213 B |             0 |              0 |          213 B |
| sass/screen.sass |     4 |          4 |              0 |           0 |         121 B |             2 |              4 |          185 B |
| sass/screen.scss |     2 |          1 |              0 |           0 |         341 B |             2 |              4 |          185 B |
| ---------------- | ----- | ---------- | -------------- | ----------- | ------------- | ------------- | -------------- | -------------- |
| Total (4 files): |     6 |          5 |              0 |           0 |         946 B |             4 |              8 |          854 B |
| ---------------- | ----- | ---------- | -------------- | ----------- | ------------- | ------------- | -------------- | -------------- |

あわせて読みたい

• CSSの常識が変わる！「Compass」、基礎から応用まで！ | 株式会社LIG
• CSS書くならCompass使った方がいいよ。SASS使ってる人なら特に。 | howtohp
• 「ズルいデザイン」最新記事一覧 - ITmedia Keywords

公式サイト

• Sass - Syntactically Awesome Stylesheets
• Compass Home | Compass Documentation