以前、『Dreamweaver CC 2017 Beta』の中でSASSのお話しを少ししたと思います。

前回記事：Dreamweaver CC 2017 Beta版で爆速コーディング！

 

このSASSを使うと、CSSがとっても書きやすく、そして見やすくなります！

 

今回はSASSに的を絞ってご紹介していこうと思います！

※エディタは、前回ご紹介した『Dreamweaver CC 2017 Beta』を使っていきます。SASSの導入方法は前回の記事をご覧頂ければと思います。

 

まず少しだけおさらいを！

セレクタを以下のように入れ子に書くと、『#header の中にある h1』という意味になります。

コンパイルすると、こんな風に入れ子のセレクタが展開されたCSSが出力されます。

恐らくSASSの機能の中でも一番多用するものかもしれませんね。

いくつものセレクタが入れ子になっている場合、親セレクタを何度も書く手間が省けるのでコーディングの時間も短縮できます！

—————————————————————————————–

おさらいをした所で、今回はCSSコーディングを更に効率化できる、『変数』と『mixin』について書いていきます！

 

変数定義はとても簡単で、頭に$記号を付けて、値を書きます。

一度定義しておけば何度でも使えるので、サイズだったり色だったり、何度も使いそうな値を定義しておくと便利です！

 

mixinは、プログラムで言う関数のような物です。

名前を定義して、中にスタイルを書きます。何度も使うスタイルがあれば、mixinで定義してしまうと便利です！

それでは、定義した変数とmixinを使ってみましょう！

mixinは@includeを頭に付けて呼び出します。

コンパイルすると、変数とmixinの中身がしっかり反映されています！

 

---

 

さてこのmixinですが、関数と言うからには引数を取ることも可能です。

font-sizeとmargin-bottomの値を引数にしたmixinを作ってみました。

呼び出すときは、それぞれに設定したい値を書いてあげます。

以下、コンパイル結果です。引数の値が反映されました！

mixinを使うとコードもかなりスッキリするので、読みやすさにもつながりそうです！

 

---

 

ちょっとオマケですが、変数は四則演算も可能です。

では$hと$wをスタイルの値に書いてあげます。

コンパイルすると、計算結果の値が自動で書き出されます！

この場合だと、横幅が高さの2倍になるボックスがあった場合、変数$hの値を指定するだけで良いので、値が変更になっても統一性が保てますね！

 

ちなみに私は、SASSの便利さを知ってから元のCSSには戻れなくなってしまいました(^^;