SASSでは、プログラミング言語で使われるような条件分岐(if文)や繰り返し構文(for文)を使うことができます。
今回はその中の条件分岐(if, else)について紹介します。
とりあえず記述方法(SCSS記法)
// if文
$theme: 'dark';
@if $theme == 'dark' {
.bg {
background-color: #666;
}
}
@else if $theme == 'light' {
.bg {
background-color: #eee;
}
}
@else {
.bg {
background-color: #fff;
}
}
条件分岐(if)とはどんなもの?
まずは、条件分岐!
記述方法は、こんな感じになります。
// if文の書き方
$theme: 'dark';
@if $theme == 'dark' {
// ここに条件が一致したときのスタイルを書く
background-color: #333;
}
条件分岐は、ある値と別の値が条件に合うかどうかを判定してくれます。
その中でもif文は、ある値と別の値が条件に合う場合に処理をします。
例えば、上のコードだと、
変数$themeが「dark」だった場合、スタイルを当てる。
となります。
多くのプログラミング言語では == で「同じだった場合」という意味を持ちます。
これを比較演算子といいます。
他にも、 != や < とかあるので、よく使う比較演算子は覚えておくと幸せになれます。
記述 | 意味 |
---|---|
A == B | AとBの値が同じ場合 |
A != B | AとBの値が異なる場合 |
A > B | Aの方が大きい場合 |
A < B | Bの方が大きい場合 |
A >= B | AがB以上の場合 |
A <= B | AがB以下の場合 |
elseを使いこなそう!
if文だけ条件が足りない場合があります。
例えば、先ほどの例だと変数 $themeが「dark」のときにスタイルを当てる記述になっていました。
じゃあ、これが「light」や「normal」「pastel」などの時はどうなると思いますか?
$theme が「dark」以外の場合は無視されてしまい、スタイルを当てることができません。
じゃあ、「dark」以外のときにスタイルを当てたいときはどうすればいいのか?
そこで登場するのが「else」なのです!
ifはある値と別の値が条件に合う場合スタイルを当ててくれます。
それに対して、elseはif文の条件以外の場合スタイルを当てます。
// dark以外の場合も処理する
@if $theme == 'dark' {
// 条件が一致する場合
background-color: #333;
}
@else {
// ifの条件以外の場合
background-color: #fff;
}
これで、「dark」以外のときは白背景に設定することができました。
さらに条件を細かくしたelse-if
さらに条件を細かくしてみましょう。
目標は下の表みたいな感じに分岐していきます。
条件 | カラーコード |
---|---|
dark | #333 |
pastel | #fdffe6 |
その他 | #fff |
「dark」と「その他」については現状で完成しています。
しかし、「pastel」の条件がどこにもありません。
そんなときに使うのが「else-if」になります。
「else-if」を使えば、if以外の新しい条件を加えることができます。
今回は「pastel」の場合なので次のように書きます。
@if $theme == 'dark' {
background: #333;
}
@else if $theme == 'pastel' {
background: #fdffe6;
}
@else {
background: #fff;
}
また、「else-if」は何個も付けることができます。
例えば「black」を追加すると、
@if $theme == 'dark' {
background: #333;
}
@else if $theme == 'pastel' {
background: #fdffe6
}
@else if $theme == 'black' {
background: #000;
}
@else {
background: #fff;
}
こんな感じです!
if文は慣れないうちは、
「結局、どんなときに使えばいいの?」
となる場合が多いと思います。
近いうちにif文の利用例を紹介する予定なので、そちらを見てもらえるとイメージできると思います!!
というわけで、今回は以上となります!
最後までありがとうございました!!