Webデザイン
 

CSSコーディングを効率化!Sassで便利な機能とは?

       

Sassとは?

Sassとは、一言で言うとCSSをより効率的に書けるようにした言語です。
Sassでは変数や関数を使えるようになるため、CSSよりも効率的にコーディングをおこなうことができます。
Sassファイルのままではhtmlで読み込めないので、CSSファイルに変換する作業(コンパイル)が必要になります。

Sassの記法について

Sassには、「SASS記法」と「SCSS記法」という2つの記法があります。

SASS記法

SASS記法では次のような書き方をします。


{}を使わずに、インデントを使って書いていくのが特徴です。末尾に「;」も必要ありません。
拡張子は「.sass」です。

SCSS記法

SCSS記法では次のような書き方をします。


CSSと似ていますが入れ子で書いていくのが特徴です。
拡張子は「.scss」です。

どちらもコンパイル後のCSSファイルでは以下のような記述になります。

Sassの便利な機能(CSSで書いた場合との比較)

ネスト(入れ子)

ネスト(入れ子)にすることで、親要素を何度も書かずに済むので記述量が減ります。

Sassで書いた場合


CSSで書いた場合

変数

色の場合など、カラーコードを変数にすればいちいちコピペしたり覚えておく必要がないので、効率的にコーディングすることができます。
繰り返し使う色などは変数にしておくことをオススメします。

Sassで書いた場合


CSSで書いた場合

mixin

@mixinで定義したスタイルを@includeで呼び出すことができます。
mixinでは引数を使用することができるので、呼び出す場所に合わせてスタイルを変更することが可能です。

Sassで書いた場合


CSSで書いた場合

extend

定義しているスタイルを継承することができます。
同じ記述を何度もしなくて済むので記述量が減ります。

Sassで書いた場合


CSSで書いた場合

まとめ

今回はSassの便利な機能をご紹介しました。
今回のサンプルコードでは記述量が少ないのでメリットを感じにくかったかもしれませんが、記述量が増えるにしたがってSassのメリットを感じられるはずです。
気になった方はぜひ導入をしてみてはいかがでしょうか。
Sassをインストールする方法はこちらの記事にまとめてあります。

MacにSassをインストールする方法

 
  • このエントリーをはてなブックマークに追加