前回で、Sassの基本機能が理解できたと思います。
今回は、Sassのプログラミング的な書き方をご紹介していきます。
JavaScriptやPHPを学ばれた方は、すぐ慣れるかと思います。
Sassでは、変数や配列、演算、if文やfor文といった記述も可能なのです。
これらは、プログラミングでは当たり前に使われる記述です。
反対に、プログラミングに触れていない方は、少々難しいかもしれません。
その時は、まず使えそうな記述だけに絞って、練習してみてください。
無理して、全て使いこなそうとする必要はありません。
背伸びしすぎることなく、少しずつ慣れていくことが大切です。
変数
プログラミングを学んだ方なら、よくご存知だと思います。
どんな言語でも、必ず存在しています。
変数とは「データを入れておく箱」です。
変数にデータを入れると、ほかの箇所で使い回すことができます。
例えば、いくつかの箇所で文字の色を赤に指定するとしましょう。
CSSで直接書けば、赤にしたい全ての箇所に赤の指定をしなければなりません。
それは、管理を考えると非常に面倒なことなんですね。
例えば、赤の色味を少し変えたいとき。
該当の赤を指定してある箇所を、すべて書き換えなければなりません。
しかし、変数にしておけば、変数の中身を変えるだけです。
一箇所変えるだけで、全ての赤の色味が変わります。
実際に試してみましょう。
common.scss
//変数$redColor1に赤色を入れる。
$redColor1:#e10008;
//該当の箇所は変数を適応しておく。
.sectionType1{
.fontColor{
color:$redColor1;
}
}
.sectionType2{
.titleColor{
color:$redColor1;
}
}
//もし赤色を変えたい時は、
//$redColor1を変えるだけで全て変化する。
まず、変数($redColor1)に赤を入れ、該当の箇所に反映させます。
もし赤の色味を変えたければ、$redColor1の赤を書き換えるだけでOKです。
変数を使った.scssをコンパイルすると下記のようになります。
common.min.css
.sectionType1 .fontColor{color:#e10008}.sectionType2 .titleColor{color:#e10008}
コンパイルすると、変数に入れた赤が反映されているのが分かります。
変数を使うことにより、一気に管理が楽になるのです。
演算
CSSで数値の計算をするにはcalcを使う必要があります。
しかしSassを使うと、そのまま演算を使うことができます。
例えば、コンテンツの横幅から100引いた数を取得したい時。
下記のようにすれば、横幅から100引いた数になります。
common.scss
//変数で元のコンテンツの横幅を指定。
$baseWidth:1024px;
.mainCont{
//メインコンテンツの横幅を指定。
width:$baseWidth;
.innerCont{
//メインコンテンツの横幅から100px引いた数を指定。
width:$baseWidth - 100px;
}
}
上記のように設定すれば、変化にも柔軟に対応できますね。
メインコンテンツの幅を変化させても常に100px引いた数を維持できます。
実際にコンパイルしてみると、どうなるでしょうか。
common.min.css
.mainCont{width:1024px}.mainCont .innerCont{width:924px}
このように、innerContの中は100px引かれています。
他にも足し算 ( + ) や割り算( / )、掛け算( * )もあわせて使うことができます。
ただ、こうした演算ならCSSで「calc」を使った方が良いでしょう。
calcなら「94%-100px」のように、%とpxを合わせて計算できます。
しかし、Sassの演算ではこれができません。
ではSassにおける演算の活用が効果を発揮するのは、いつか。
それは、次にご説明する関数等と組み合わせた時です。
関数
関数とは、前回紹介したmixinに似ています。
あらかじめ処理を作っておき、その処理を使いまわします。
mixinでは事前にデザインをCSSで書き使い回すことができました。
デザインごと指定し、使い回すことができたのです。
しかし、関数はより小さい範囲での使い回しができます。
厳密に言えば、関数で扱えるのは「値」だけです。
例えば、与えられた数字を半分にする関数を作ったとします。
あとで何か数字を半分にしたい時に、数字を送ったとしましょう。
すると、元の半分の値を取得できるのです。
言葉で説明してもわかりにくいと思いますので、実際に使ってみましょう。
common.scss
//$dに数字を送ると、2倍になって返されます。
@function layout1($d){
//roundをつけると小数点以下が四捨五入されます。
//つけなくても機能します。
@return round($d * 2);
}
.glaph{
//横幅が40pxとなってコンパイルされます。
width:layout1(20)+px;
}
このように、基本的に値だけ返すのがSassの関数です。
returnに続いて、計算式を書けば、それが値となって返されます。
今回は、.glaphの横幅として返されました。
なお、コードに出てくる「round」はネイティブ関数と呼ばれています。
小数点以下を四捨五入するのが、ネイティブ関数の効果です。
後述しますが、他にもネイティブ関数はたくさんあります。
common.min.css
.glaph{width:40px}
先ほどのSassをコンパイルすると、こうなります。
値が指定した数の倍になっているのが分かりますね。
また、ネイティブ関数ですが、全てはご説明しません。
全ての関数を覚える必要はなく、何ができるかだけ把握してください。
そして、実際に「使えるかも」と思った場面で活用すればいいのです。
使えるかも、と思ったタイミングで改めて、書き方を確認すれば良いですからね。
他のネイティブ関数に関しては、下記で確認してみてください。
現場で役立つ実践Sass（5）関数も使おう
https://blogs.adobe.com/japan/web-practical-sass-05-functions/
このように、Sassはプログラミング的な書き方も可能とします。
ただ、こうして机上で学ぶだけだと、使い所は把握できません。
実際に自分でWEBサイトを作ってみましょう。
その中で変数や関数などを使いながら、効率的な書き方を模索します。
どんな書き方をすれば、より効率的か。
どのような設計をすれば、便利に管理できるか。
全体の設計を考えながら書いていくことが重要です。
ぜひ、最高の設計を考えてみてください。