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

すがブロ

sugamasaoのhatenablogだよ

Sass 3.x系を知る

はじめに

この記事はRuby Advent Calendar jp: 2010 : ATNDの10日目です。前日はTrinityTさんでした。

最近注目の浴びている Sass を改めて学んでみましょう

前フリ

Ruby 界隈では Haml とセットで1〜2年前くらいから話題にはなっている(と思っている)のですが、私の周りでは Haml の話は聞くことがあっても Sass をバリバリ使ってるぜ、という話しはあまり聞きません。
しかし、Haml と違い Sass の場合は単体での使用も現実的な選択だと思っているので*1Ruby/Rails 案件という枠組みを超えた使い方ができるのでは無いかと考えています。
そんなわけで一年前に以下のライブラリを作ったのですが、現在の Sass 3 系では --watch オプションができていて、本家で同等の事ができるようになりました*2

本題

そして、最近はWeb制作界隈(?)でも Sass が浸透してきているらしく、1月の CSS Night でもセッションが行われるようです。

また、こんな Togetter のまとめもあり、水面下では盛り上がっている、これから盛り上がってくるのではないかと思われます。あと、DWでも使えたりするらしい。

というわけで、ここで Sass をおさらいして、2年くらい前に見たわとドヤ顔しましょう。

インストール方法

% gem install haml

でインストール可能です。
コマンドラインで使う 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% とか)と関数が使えるよ
  • @import でファイルを読み込めるよ
    • "_hoge.scss"ファイルを @import "hoge" と記述することで読み込めるよ。CSSに出力した結果は一つのファイルとして扱われるよ*4
  • プロパティ名も動的に変えられるよ($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 --watch src/sass/hoge.scss:public/css/hoge.css

>>> 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.scss

sass ディレクトリと同じ階層で css 側も作られるよ。

まとめ

基本的な機能(ネストや関数など)は以前の sass 2 系から大きな違いは無さそうです。本家のドキュメントを見るのが正確ですが、どんなことができるんだろう?というさわりの部分は多少古い記事でも大丈夫かなぁと思いました。
ただ、--watch だけは本当に神機能なのでこれがあれば sass 単体での使用の容易さもグッと上がるはずです。

*1:hamlもそうなのだけれどSassの方がメリットあると思うので

*2:そう、Saagの役目は終わったのです……

*3:Sass3から

*4:結果としてファイル数を減らせるのでリクエスト数の削減にもなりますね

*5:ディレクトリの作成までしている!