だいたいこんな話

Sass っていうのは CSS を書くための言語。メタ言語です。
少し覚えることはありますが、直感的に、格好良く CSS を書くことが出来るようになったり、運用性を高めることも出来るものだそうです。

CSS をもっと楽に使いたい。あるいはフレームワークとしての CSS を考える場合にもっと強力な機能が必要ではないか。と思い、まずは触って勉強しましょうと、とりあえずここのサイトで導入してみました。

それで今回は、Sass の使い方は割と各所で説明されているので、このサイトで使ってみてこんなでした。というお話です。まだまだ十分に使いこなしてない感はありつつ。

結果

作った Sass (.scss) ファイル
https://gist.github.com/912381

出来上がった CSS ファイル
https://gist.github.com/912382

かいつまんで説明

実際に Sass コマンドの実行対象になってるのはこれ。
これに対して Sass site.scss:site.css で .css ファイルを生成して YUI Compressor で圧縮して使ってます。

https://gist.github.com/912381#file_site.scss

最終的に1つの CSS ファイルになるのでリクエスト数を気にせず @import し放題

CSS を分割して @import するとリクエスト数が気になるなーと思っていたのですが、@import で一杯の .scss ファイルも Sass コマンドで叩けば @import した全てをまとめた1個の .css ファイルが出来上がるので、編集用では分割管理。公開用では1ファイルにすっきり。ということが出来ます。

YUI Fonts CSS の .scss に $yui-13px とかのフォントサイズ指定用の変数を入れるアイデアは hail2u さんの手法をそのまま参考にさせてもらっています。

_yui-fonts-min.scss at master from hail2u/scss-partials
https://github.com/hail2u/scss-partials/blob/master/_yui-fonts-min.scss

サイトで使う色なんかのルールは変数で管理

サイト内で使う色のルールなどは変数で管理。それだけをまとめるファイルを用意しました。あまり物を置いてないサイトなので殺風景ですが、ここの定義と使用場所をうまく設計しておけばサイト全域に渡る変更も負担が減るのではと。

また、変数名をうまく付けていってあげれば引き継ぎやお手伝いでプロジェクトに参加する際にサイトのトンマナを掴む良い材料に出来るかもしれません。

見出しのスタイルは mixin にまとめてみた

mixin は活用しきれてない感が。

見出しは全部、 section と h1 要素のみで付けているので section section h1 … の子孫セレクタで済む感じもしますが、使いどころかな、と思い。場所によって、上マージン 0 にしたいとかもあったので、今のところ @include してちょっと微調整するための基にする記述みたいなことになってます。

グリッドシステムも mixin で提供

長いのでリンクで

https://gist.github.com/912381#file__grid.scss

960 Grid System で作った CSS を編集して mixin モジュールにしました。

たぶん、従来は HTML 側に class=”grid_1″ とか class=”alpha grid_1″ とか書くことになるのですが、CSS の側の記述として、ここでグリッド使いたいな、という箇所で @include を使ってこれを呼び出す。これで HTML 側にはグリッドを使うための class 属性値は無くすことが出来る。それでいて .scss ファイルを読めば、ここはグリッド使ってますよー。というのを明示的に示せる。

感想とか

こざっぱりしたサイトなので劇的に活きてくるものでもなかった。込み入った機能も使っていないし。その分、試しで入れるのは割と楽に出来ました。

大規模なサイトで変数の設計がうまく出来ていれば、デザインルールの1資料として下手なドキュメントより役立ったりしないかな。という希望はあったりします。

まだ Sass ならではの使い方は色々とあるだろうし、あるいはこれで実際 CSS 設計はいい塩梅になるのかとか、チームでどうやって使う?とか、新しい考え方が入り用になってきそうです。