今回のSassは、さらにプログラミングらしくなっていきます。
プログラミングではおなじみのif文、for文、each文を使えます。
といっても、まだプログラミングに触れていない方は、よく分かりませんよね。
簡単にご説明すると、次のようになります。
- if文は「条件分岐」で、条件がAだったらAルートを選ぶ、と処理できます。
- for文は「繰り返し」で、指定回数分、同じ処理を繰り返せます。
- 1つの変数の中に、いくつものデータを格納できる「配列」が使えます。
- each文で「配列の中身を順に出力」できます。
まだ、ざっくりとした理解で構いません。
それぞれの項目で、詳しく説明していきます。
if文やfor文は、これまでphpやJavaScriptと言ったプログラミングだけのものでした。
しかしSassが生まれたことによって、CSSでも使えるようになったのです。
まだphpやJavaScriptに触れてない方も、ここで触ってみてください。
プログラミング言語を学ぶ時、理解がスムーズになるかもしれません。
それではまず、if文からご説明していきます。
if文
if文とは、条件によって処理を変える分岐のことです。
例えば変数の中身が「りんご」だったら、色を「赤」に変えたり。
変数の中身が「桃」だったら色を「ピンク」に変えたり、という処理です。
数字が1より多かったら、デザインAを出力する。
数字が10より多かったら、デザインBを出力する。
そんな処理の分岐を作ることができるのです。
では、実際にSassでif文を使う時、どうすべきでしょうか。
基本的には、次のような書き方をします。
//まず、変数をセットします。
$category:diary;
$count:8;
.mainCont{
//もし$categoryがdiaryなら次のCSSを適用
@if $category == diary{
background:#000;
color:#fff;
//もし$categoryがstudyなら次のCSSを適用
}@else if $category == study{
background:#dde0f4;
color:#18288a;
//もし$categoryがどれも当てはまらないなら次のCSSを適用
}@else{
background:#fff;
color:#000;
}
.innerCont{
//もし$countが5以下なら次のCSSを適用
@if $count <= 5{
background:#000;
color:#fff;
//もし$countが6以上10未満なら次のCSSを適用
}@else if $count >= 5 and $count <= 10{
background:#dde0f4;
color:#18288a;
//もし$countが上記以上なら次のCSSを適用
}@else{
background:#fff;
color:#000;
}
}
}
このように、条件によって、出し分けが可能です。
なおifで使われている=や<=といった記号があります。
これらの記号は「比較演算子」と呼ばれ、値を比較する際に使われます。
下記に一覧をまとめますので、随時使い分けてみてください。
- 「==」同じだったら
- 「!=」同じじゃなければ
- 「<=」左の数字が右の数字以下だったら
- 「>=」左の数字が右の数字以上だったら
- 「<」左の数字が右の数字より大きかったら
- 「>」左の数字が右の数字より小さかったら
また、if文に2つ以上の条件を指定する時。
「and」「or」のような文字列を使います。
これを「論理演算子」と呼びます。
- 「and」どちらも条件が揃った時
- 「or」どちらか片方の条件が揃った時
基本的には、この2つを使います。
if文は論理演算子と比較演算子を使い分けながら書きます。
なお、今回のscssをコンパイルすると、次のようになります。
common.nested.css
.mainCont {background:#000;color:#fff;}
.mainCont .innerCont {background:#dde0f4;color:#18288a;}
無事、CSSが条件通りになっていますね。
if文はデザインの出し分けに、特に重宝します。
WEBサイトを作りながら使い方を考えてみましょう。
for文
同じ処理を何度か繰り返したい時があります。
例えば、連番でクラス名をつけて、CSSを指定したい時。
paddingなどを10ずつ加算して10パターン作りたい時。
for文を使うことで、素早く効率的にCSSを構築できます。
for文はループ、とも呼ばれています。
繰り返しを意味するループですね。
今回は10ずつpaddingを増やすループを試してみましょう。
//変数 from 開始値 through 終了値
//1回のループにつき1ずつ変数に加算される
//開始値から始まり、終了値になるまで繰り返される
@for $i from 1 through 10{
//変数を#{$i}でクラス名や値に使えます
.padding-top-#{$i}0px{
padding-top:#{$i}0px;
}
}
for文の使い方は説明の通りです。
では、このfor文をコンパイルすると、どうなるでしょう。
common.nested.css
.padding-top-10px {
padding-top: 10px; }
.padding-top-20px {
padding-top: 20px; }
.padding-top-30px {
padding-top: 30px; }
.padding-top-40px {
padding-top: 40px; }
.padding-top-50px {
padding-top: 50px; }
.padding-top-60px {
padding-top: 60px; }
.padding-top-70px {
padding-top: 70px; }
.padding-top-80px {
padding-top: 80px; }
.padding-top-90px {
padding-top: 90px; }
.padding-top-100px {
padding-top: 100px; }
このように10パターンのCSSが書き出されました。
通常のCSSなら、記述が面倒だったでしょう。
ところがforを使えば、非常にシンプルに書くことができるのです。
繰り返しにおける処理をfor文は簡単に実現します。
他のプログラミング言語でもよく使われる処理です。
each文
最後にeach文をご紹介します。
このあたりまで抑えれば、ある程度Sassも使いこなせるでしょう。
each文を説明するには、まず配列について知る必要があります。
配列とは「いくつもデータを入れられる」変数です。
これまでの変数を「箱」だとすると、配列は「棚」です。
1つの棚の中に、いくつも物をしまえるようなイメージを持ちましょう。
使う時は、好きな棚を開けて中身を取り出せば使えます。
例えば「画像」という配列があったとしましょう。
その中に、base、over、cross、dataという言葉を入れます。
配列として書くとこんな感じです。
$imgs : base, over, cross, data;
では、この配列を、どのように使えば良いでしょうか。
配列の中身を使うには、each文を使って取り出します。
//配列を指定します。
$imgs : base, over, cross, data;
//変数 in 配列
@each $v in $imgs{
//#{変数}で中の文字をclassと繋いで出力できます。
.bg-#{$v}{
//値に使う時は、変数を指定するだけでOKです。
background: url(#{$v}.png);
}
}
では、コンパイルすると、どうなるでしょうか。
.bg-base {
background: url(base.png); }
.bg-over {
background: url(over.png); }
.bg-cross {
background: url(cross.png); }
.bg-data {
background: url(data.png); }
このようにbackgorundが4つずつ出来ました。
今回はclass名と画像名に配列の値を使いました。
また、1つの配列に2つの値を入れることもできます。
といっても、あまりイメージがわかないと思うので、実際にやってみましょう。
例えば4パターンのcolorを変化させるclassを出力するとします。
そこで、下記の条件を配列で出力したいとしたらどうなるでしょうか。
- class名は.color-redのように色が明確にわかるようにしたい。
- そして値はcolor:#c51919;のようにカラーコードで出力したい。
先ほどの方法だと、class名と値を違うテキストにすることはできません。
見返してみるとわかるかと思いますが、class名と値が、baseやoverのように、同じ名前になってますよね。
それでは、要望がかなえられません。
今回の場合、2つの値を出し分ける必要があります。
配列は通常、値を1つずつ入れていくしか出来ません。
そこで使うのが「連想配列」という配列です。
色とカラーコード、2つ以上のデータを並列に配置できます。
//連想配列。
$colors-list: (
//左が色の名前(変数1)、右にカラーコード(変数2)。
//今回の組み合わせに限らず自由に入れられます。
red:#c51919,
blue:#244ec7,
green:#49ba26,
yellow:#d5cf1f
);
//変数1($name),変数2($color) in 配列
@each $name, $color in $colors-list{
//$nameと$color、2つ使い分けられます。
.color-#{$name}{
color:$color;
}
.back-color-#{$name}{
background:$color;
}
}
このソースコードをコンパイルするとどうなるでしょうか。
.color-red {
color: #c51919; }
.back-color-red {
background: #c51919; }
.color-blue {
color: #244ec7; }
.back-color-blue {
background: #244ec7; }
.color-green {
color: #49ba26; }
.back-color-green {
background: #49ba26; }
.color-yellow {
color: #d5cf1f; }
.back-color-yellow {
background: #d5cf1f; }
名前とカラーコードに分けてコンパイルできました。
このように、配列とeachを使うと、連番的なCSSを一気に生成できます。
CSSで書くと、長く冗長なコードになりますが、Sassだとシンプルです。
最初は使いづらいかもしれませんが、何度も使ってみてください。
慣れてくれば、従来のCSSよりも楽で、シンプルに感じられます。
ぜひ、使いこなせるように練習してみましょう。