Sass 3.x系を知る
はじめに
この記事はRuby Advent Calendar jp: 2010 : ATNDの10日目です。前日はTrinityTさんでした。
最近注目の浴びている Sass を改めて学んでみましょう
前フリ
Ruby 界隈では Haml とセットで１〜２年前くらいから話題にはなっている（と思っている）のですが、私の周りでは Haml の話は聞くことがあっても Sass をバリバリ使ってるぜ、という話しはあまり聞きません。
しかし、Haml と違い Sass の場合は単体での使用も現実的な選択だと思っているので*1、Ruby/Rails 案件という枠組みを超えた使い方ができるのでは無いかと考えています。
そんなわけで一年前に以下のライブラリを作ったのですが、現在の Sass 3 系では --watch オプションができていて、本家で同等の事ができるようになりました*2。
本題
そして、最近はWeb制作界隈（？）でも Sass が浸透してきているらしく、1月の CSS Night でもセッションが行われるようです。
また、こんな Togetter のまとめもあり、水面下では盛り上がっている、これから盛り上がってくるのではないかと思われます。あと、DWでも使えたりするらしい。
というわけで、ここで Sass をおさらいして、2年くらい前に見たわとドヤ顔しましょう。
２つある書式
これは Sass - Syntactically Awesome Stylesheets の前半に書いてあることです。
以下で書いてあるスクリプトは両方共同じ CSS を出力するものです。
.scss 形式
.scss は新しくできたメインの記法だよ*3。 "SCSS"と記述する場合はこの記法のことだよ。
この記法は CSS3 をサポートしているよ。つまり、 valid な SCSS 記法を使うことは valid な CSS3 を書くことと同じだよ。
拡張子は .scss だよ。
$blue: #3bbfce;
$margin: 16px;
.content-navigation {
border-color: $blue;
color:
darken($blue, 9%);
}
.border {
padding: $margin / 2;
margin: $margin / 2;
border-color: $blue;
}
.sass 形式
以前から使われていた記法で、インデントによる記法だよ。Hamlに超絶インスパイアされた記法だよ。
括弧やセミコロンを省略したい人向けだよ。
メインの記法ではないけれど、これからもサポートはしていくよ。
拡張子は .sass だよ。
$blue: #3bbfce $margin: 16px .content-navigation border-color: $blue color: darken($blue, 9%) .border padding: $margin / 2 margin: $margin / 2 border-color: $blue
主な機能
詳しくは Sass - Syntactically Awesome Stylesheets を見てね。
いくつかピックアップすると
- ネストした記法が書けるよ
- 変数が使えるよ
- 単位の演算（#cccccc - 20% とか）と関数が使えるよ
- 組み込みの関数は Module: Sass::Script::Functions ここら辺を参照
- @import でファイルを読み込めるよ
- プロパティ名も動的に変えられるよ($sideで定義した文字列をborderと連結している)。抽象化の役に立ちそうだよ。
#navbar { $side: top; $radius: 10px; border-#{$side}-radius: $radius; -moz-border-radius-#{$side}: $radius; -webkit-border-#{$side}-radius: $radius; }
こんな風に変換されるよ
#navbar { border-top-radius: 10px; -moz-border-radius-top: 10px; -webkit-border-top-radius: 10px; }
その他、気になる機能
ここら辺にいろいろ書いてあるよ。 File: SASS_REFERENCE
.sass と .scss の変換
sass-convert コマンドを使うと良いよ
debug 出力
@debug 10 - 5%
こんな風に .scss ファイルに書いておいてコンパイルすると、
% sass hoge.scss
hoge.scss:3 DEBUG: 5%
こんな感じでdebugの値を出力してくれるよ。
コンパイル時の圧縮レベル
#main { color: #fff; background-color: #000; } #main p { width: 10em; } .huge { font-size: 10em; font-weight: bold; text-decoration: underline; }
こんな scss ファイルがあったとして -t オプションを付けると
% sass hoge.scss -t compressed
#main{color:#fff;background-color:#000}#main p{width:10em}.huge{font-size:10em;font-weight:bold;text-decoration:underline}
こんなふうに改行等を圧縮してくれる。圧縮レベルはいくつかあるので、デプロイ時と開発時で分けると良いよ。
最後にもっとも大切なこと
Sass を単独で使う場合の最重要コマンドがあります。これを覚えれば他のことは覚えなくても良いです。
watch オプション
sass コマンドには --watch オプションがあります。
これを使用することで、変換対象のファイル更新を監視し、変更があれば css へ変換してくれます。
ファイル単体指定
├── public
│ └── css
└── src
└── sass
└── hoge.scssこの状況で、以下のコマンドを実行してみましょう。
>>> Sass is watching for changes. Press Ctrl-C to stop.
create public/css/hoge.css
Warning: Unable to load CarbonCore. FSEvents will be unavailable.
(ここでファイル変更)
>>> Change detected to: src/sass/hoge.scss
overwrite public/css/hoge.cssなお、 --watch の引数はちょっと特殊で ":" で区切る必要があって、 監視ファイル名:出力先ファイル名 となります。
あとは変更したタイミングでその都度 CSS がコンパイルされます。
ディレクトリ指定
ディレクトリ構成は以下のような感じを想定してください。
├── public
│ └── css
└── src
└── sass
├── common
│ └── utils.scss
└── hoge.scssで、以下のように指定
% sass --watch src/sass:public/css
>>> Sass is watching for changes. Press Ctrl-C to stop.
directory public/css/common
create public/css/common/utils.css
create public/css/hoge.css
Warning: Unable to load CarbonCore. FSEvents will be unavailable.
(ここでファイル更新)
>>> Change detected to: /private/tmp/test/src/sass/common/utils.scss
overwrite public/css/common/utils.cssディレクトリを指定すると、きちんと子要素も変換してくれているようです*5。tree で確認してみましょう。
├── public
│ └── css
│ ├── common
│ │ └── utils.css
│ └── hoge.css
└── src
└── sass
├── common
│ └── utils.scss
└── hoge.scsssass ディレクトリと同じ階層で css 側も作られるよ。
まとめ
基本的な機能（ネストや関数など）は以前の sass 2 系から大きな違いは無さそうです。本家のドキュメントを見るのが正確ですが、どんなことができるんだろう？というさわりの部分は多少古い記事でも大丈夫かなぁと思いました。
ただ、--watch だけは本当に神機能なのでこれがあれば sass 単体での使用の容易さもグッと上がるはずです。
