【SASS】初心者向け!SASSを使ってみよう! 《便利機能8つ!!》

こんにちは。

ぬこ飼いデザイナー佐竹です。
前回(【SASS】初心者向け!SASSを使ってみよう!《基本情報編》)から、SASSについてご紹介しています。
今回は、導入にあたって、絶対に導入したくなる!SASSの便利な機能についてまとめてみようと思います。
ブログを書きながら私も勉強していきたいと思っています!

記述の簡略化

入れ子(ネスト)が使えるので、長い階層記述を省くことが可能になります。
セレクタを何度も書く必要がなくなり、効率的です。
一度使ったセレクタは@extendで使いまわせるので、非常に合理的です。

変数・関数を使える

変数を定義できます。
初めに各種設定を定義しておけば、変更も再利用も効率よく行えます。
関数については、リファレンスが必要になりますが、様々な処理が行えます。

四則演算が使える

レイアウトの際に、演算処理ができるようになるので、「均等に3分割、4分割」などが可能になります。

スタイルを継承することができる

既存のクラスを引き継いだ状態で、新しくスタイルを書き加えることができます。

コードの再利用

スタイルをまとめて、モジュールやテンプレートのように定義し、読み込んで使うことが可能です。
値を可変にした定型文のような感じで使用する場合@mixinを使用します。値の一部を変更して使いまわすことが可能です。
値が固定の場合は@extendを使用します。

条件分岐などプログラム的な処理が可能

ifやfor文を使えるので、様々な条件分岐での繰り返し処理を行えます。

CSSファイルを圧縮できる

大規模サイトで複数のcssを管理しているような場合も、RubyやKoalaで圧縮することで1つのcssファイルとして書き出すことが可能です。

フレームワークが使える

Compassなど、様々なフレームワークが開発されています。
機能を拡張することが出来、さらに便利になります。