Sassの便利な機能

◆ネスト

セレクタを入れ子にすることができます。
視認性が高くなり、把握・管理がしやすくなります。

出力結果

◆スタイルの継承 @extend

出力結果

◆変数の使用と演算が可能

Sassにはround()やfloor()など、定番の関数も用意されており、理想の演算結果得ることができます。

出力結果

◆スタイルの定義 @mixin

よく使用するスタイル等は、予め定義しておくと@includeで簡単に素早く呼び出すことができます。
また、引数を渡すこともできるため、汎用性も高いです。

出力結果

また、Compassには予め便利なmixingがたくさん定義されており、Compassを使用することでよりスピーディーなスタイル定義が行えます。
CSS3で一番面倒なベンダープレフィックスの処理に関しては特にその効果を発揮できます。

出力結果

◆条件分岐@ifや繰り返し処理@forが行える

Javascriptライクに書けますが、こう言った事は大抵JS側でやった方が良いので左程活躍する場はなそう?

出力結果

◆独自関数が作成できる

@mixin似ていますが、こちらは値を返してくれます。
勿論引数を使うこともできるので、グリッドレイアウトでカラムの幅を変更したりなど、何かと使えそうです。

出力結果

◆複数のファイルを1つのcssにまとめることが可能 @include

スタイルは行数が長くなればなるほど、目的のスタイルを見つけづらくなり、作業効率も悪くなります。
Sassでは、@includeを使って別のsassまたはscssファイルを読み込むことができ、複数ファイルで記述したスタイルを、1つのcssファイルに統合して出力することが可能なので、レスポンシブサイトなど、ブレークポイント別にスタイルシートを分け、納品時は1つのcssにまとめると言った使い方が出来ます。

出力結果

sassまたはscssファイルは、ファイル名の頭に_(アンダーバー)を付けることにより、そのファイルをコンパイル対象外にすることができます。
予めincludeを目的としたファイルを作成する場合は_を付けると良いでしょう。
また@includeで読み込むファイルは、ファイル名先頭の_と拡張子を省略して記述することができます。

◆選べる出力フォーマット output_style

config.rbにoutput_styleプロパティを追加することで、任意のフォーマットで出力することが可能です。

■output_style = :expanded

一般的なフォーマットです。

■output_style = :nested

expandedとの違いは閉じ括弧が文末に付く。

■output_style = :compact

1行にしてくれる。

■output_style = :compressed

compactをより圧縮したもの。空白等削除。
通常、1行のコメント//は削除され、複数行のコメント/**/は出力されますが、compressedはどちらも出力されない。

制作時はexpanded、納品時はcompressedが良さそう。

最後に

rotateこれまで紹介した機能を見ても分かる通り、Sass/CompassはWEBコーディングにおいてとても強力な補助ツールであることは間違いありません。Sass/Compassには、ここで紹介した機能以外にも、沢山の便利な機能が備わっています。興味のある方は是非、実際に使ってみてその便利さを体験してください。個人的にはベンダープレフィックスを書かずに済むだけでも利用の価値は十分あると思います。例えば、右のような角丸、グラデーション、ボックスシャドウ、アニメーションと言った、CSSで最も無駄に時間を消費するベンダープレフィックスを要するスタイルも、短時間で実装することができます。

出力結果

1 2

© grotta design Inc.