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 */ #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 | | ---------------- | ----- | ---------- | -------------- | ----------- | ------------- | ------------- | -------------- | -------------- |
