SASSにおける条件分岐
この記事ではSASSにおける条件分岐について説明します。
@if, @else if, @else ディレクティブを使った条件分岐の基本から応用までを、実例とともにわかりやすく解説します。
YouTube Video
SASSにおける条件分岐
SASSはCSSを拡張するスタイルシート言語で、条件分岐を使って柔軟にスタイルを制御できます。SASSでは @if, @else if, @else を用いて、コンパイル時にスタイルの出力を切り替えることができます。
基本的な条件分岐の構文
SASSの基本的な条件分岐は以下の構文で記述します。
1@if condition {
2 // Code executed when the condition is true
3} @else if condition {
4 // Code executed when another condition is true
5} @else {
6 // Code executed when all conditions are false
7}@ifは最初の条件を評価し、偽の場合は@else ifまたは@elseのブロックが順に評価されます。
簡単な条件分岐の例
次の例では、変数 $theme に基づいて背景色を切り替えています。
1$theme: "dark";
2
3body {
4 @if $theme == "dark" {
5 background-color: #333;
6 color: #fff;
7 } @else if $theme == "light" {
8 background-color: #fff;
9 color: #000;
10 } @else {
11 background-color: #f0f0f0;
12 color: #333;
13 }
14}コンパイル後のCSS
1body {
2 background-color: #333;
3 color: #fff;
4}$themeが"dark"のとき、暗い背景と白い文字色が適用されます。
条件分岐と計算の組み合わせ
条件分岐は単なる文字列や色の比較だけでなく、数値計算にも対応しています。
1$width: 1200px;
2
3.container {
4 @if $width > 1000px {
5 max-width: 1200px;
6 } @else {
7 max-width: 800px;
8 }
9}コンパイル後のCSS
1.container {
2 max-width: 1200px;
3}- 数値比較も可能で、
$widthが1000pxを超えるとmax-width: 1200pxが出力されます。
ネストされた条件分岐
条件分岐をネストさせることで、複雑な条件を記述できます。
1$theme: "dark";
2$size: "large";
3
4button {
5 @if $theme == "dark" {
6 background-color: #000;
7 color: #fff;
8
9 @if $size == "large" {
10 padding: 20px;
11 } @else {
12 padding: 10px;
13 }
14 } @else {
15 background-color: #fff;
16 color: #000;
17
18 @if $size == "large" {
19 padding: 15px;
20 } @else {
21 padding: 8px;
22 }
23 }
24}コンパイル後のCSS
1button {
2 background-color: #000;
3 color: #fff;
4 padding: 20px;
5}- 条件分岐を入れ子にすることで、テーマとサイズの両方に基づいたスタイル指定が可能です。
条件分岐のカスタム関数での活用
条件分岐をカスタム関数内で使用することで、再利用性を高められます。
1@function adjust-color($theme) {
2 @if $theme == "dark" {
3 @return #333;
4 } @else if $theme == "light" {
5 @return #fff;
6 } @else {
7 @return #ccc;
8 }
9}
10
11.card {
12 background-color: adjust-color("dark");
13}コンパイル後のCSS
1.card {
2 background-color: #333;
3}- 条件分岐を関数にまとめることで、再利用性と保守性を高められます。
便利な応用例 - デザインの切り替え
特定の条件に応じてデザイン全体を切り替える場合の例を見てみましょう。
1$theme: "light";
2
3body {
4 font-family: Arial, sans-serif;
5
6 @if $theme == "dark" {
7 background-color: #121212;
8 color: #e0e0e0;
9 } @else if $theme == "light" {
10 background-color: #f9f9f9;
11 color: #333;
12 } @else {
13 background-color: #fff;
14 color: #000;
15 }
16}
17
18header {
19 @if $theme == "dark" {
20 border-bottom: 1px solid #333;
21 } @else {
22 border-bottom: 1px solid #ccc;
23 }
24}コンパイル後のCSS
1body {
2 font-family: Arial, sans-serif;
3 background-color: #f9f9f9;
4 color: #333;
5}
6
7header {
8 border-bottom: 1px solid #ccc;
9}- テーマ変数に応じて、ページ全体の配色を動的に切り替えることができます。
注意点とベストプラクティス
SASSの条件分岐を利用する際には、次のポイントを考慮できます。
-
条件分岐をシンプルに保つ
複雑な入れ子構造は可読性を下げるため、関数やmixinを活用するとシンプルに保てます。
-
変数や関数での抽象化
同様の条件を複数箇所で使う場合は、変数や関数にまとめると保守性が向上します。
-
ロジックの肥大化を防ぐ
デザインルールはできるだけ統一し、条件分岐の乱用を避けることが望ましいです。
まとめ
SASSの条件分岐は、柔軟で動的なスタイルの作成に非常に有効なツールです。ここでは、基礎から応用例までをステップバイステップで解説しました。実際のプロジェクトで条件分岐を活用する際は、必要以上に複雑化しないように注意しながら、再利用可能なコードを意識して設計できます。
YouTubeチャンネルでは、Visual Studio Codeを用いて上記の記事を見ながら確認できます。 ぜひYouTubeチャンネルもご覧ください。