SASSにおける`if`関数
この記事ではSASSにおけるif関数について説明します。
if関数の基本的な使い方から、応用的なテクニックまで、ステップバイステップで説明します。
YouTube Video
SASSにおけるif関数
if()関数は、SASSが提供するシンプルな条件式関数で、真偽値に応じて2つの値のどちらかを返します。JavaScriptの三項演算子に似ています。
構文
構文は次のようになります。
1// if(condition, trueValue, falseValue)conditionが真ならtrueValueを、偽ならfalseValueを返します。
基本的な使い方
たとえば、if()関数を使って、テーマがダークモードかライトモードかに応じて、背景色と文字色を変えることができます。
サンプルコード
1$theme: "dark";
2
3$background-color: if($theme == "dark", black, white);
4$text-color: if($theme == "dark", white, black);
5
6body {
7 background-color: $background-color;
8 color: $text-color;
9}$theme変数が"dark"なら黒背景で白文字に、"light"なら白背景で黒文字になります。
出力されるCSS
1body {
2 background-color: black;
3 color: white;
4}$theme変数が"dark"のため、黒背景で白文字になっていいます。
@if文とif()関数の違い
SASSには条件分岐を行うための@if文とif()関数がありますが、それぞれの用途は異なります。
サンプルコード
1$theme: "dark";
2
3// `@if` statement: Compile-time branching (syntax level)
4$background-color: null;
5@if $theme == "dark" {
6 $background-color: black;
7} @else if $theme == "light" {
8 $background-color: white;
9} @else {
10 $background-color: gray;
11}
12
13// `if()` function: Returns a value (expression level)
14$text-color: if($theme == "dark", white, black);
15
16body {
17 background-color: $background-color;
18 color: $text-color;
19}@if文は、SASSのコンパイル時にどのコードを出力するかを制御します。- 一方で、
if()関数は値を返す関数であり、式の中で動的に値を切り替えるときに使います。
出力されるCSS
1body {
2 background-color: black;
3 color: white;
4}- この例では、
$themeが"dark"のため、背景は黒、文字色は白が適用されています。 @if文は構造を制御し、if()関数は値を返すという点が、2つの大きな違いです。
ネストされたif関数の利用
複雑な条件分岐が必要な場合は、if関数をネストして使用することができます。
サンプルコード
1$theme: "custom";
2$custom-color: blue;
3
4$background-color: if(
5 $theme == "dark",
6 black,
7 if(
8 $theme == "light",
9 white,
10 $custom-color
11 )
12);
13
14body {
15 background-color: $background-color;
16}$themeが"dark"の場合は黒、"light"の場合は白、それ以外の場合はデフォルト値（$custom-color）を返します。
出力されるCSS
1body {
2 background-color: blue;
3}$theme変数がcustomのため、背景色が青になっています。
実用的なユースケース
テーマの切り替え
以下は、テーマに応じてボタンのスタイルを変更する例です。
1$theme: "dark";
2
3.button {
4 background-color: if($theme == "dark", #333, #fff);
5 color: if($theme == "dark", #fff, #333);
6 border: 1px solid if($theme == "dark", #444, #ccc);
7}- このコードは、変数
$themeの値に応じてボタンの背景色や文字色、枠線色を切り替えるSASSの条件分岐の例です。if()関数を使って、ダークテーマとライトテーマのスタイルを動的に設定しています。
出力されるCSS
1.button {
2 background-color: #333;
3 color: #fff;
4 border: 1px solid #444;
5}- テーマを切り替えるだけで、全体のデザインを統一的に変更できます。
応用例: 色のコントラストを動的に設定
文字色を背景色に応じて自動的に設定する例を見てみましょう。
サンプルコード
1@use "sass:color";
2
3$background-color: #000;
4
5$text-color: if(
6 color.channel($background-color, "lightness", $space: hsl) > 50%,
7 black,
8 white
9);
10
11body {
12 background-color: $background-color;
13 color: $text-color;
14}color.channel()関数を使用して、背景色の明度（lightness）を取得しています。その値が50%より大きい場合は黒、小さい場合は白を文字色として選び、背景とのコントラストを自動的に最適化します。
出力されるCSS
1body {
2 background-color: #000;
3 color: white;
4}if()関数を用いることで、コントラストの調整など、デザインのアクセシビリティを考慮した柔軟なスタイルを実現できます。
@functionとの組み合わせ
if関数を@functionの中で使用すると、さらに柔軟なスタイル設計が可能になります。
サンプルコード
1@function theme-color($theme, $type) {
2 @return if(
3 $theme == "dark",
4 if(
5 $type == "background",
6 black,
7 white
8 ),
9 if(
10 $type == "background",
11 white,
12 black
13 )
14 );
15}
16
17body {
18 background-color: theme-color("dark", "background");
19 color: theme-color("dark", "text");
20}- このコードは、
@function内でif()関数を使い、テーマと色の種類に応じて適切な色を返す仕組みを示しています。これにより、テーマごとに統一的で再利用可能なスタイル設計が可能になります。
出力されるCSS
1body {
2 background-color: black;
3 color: white;
4}if関数を使った関数を用いることで、プロジェクト全体の保守性を高められます。
注意点
-
if関数は動的な値には使用できない CSS自体は静的な言語であるため、if関数はSASSがコンパイルされる時点で値を決定します。ランタイムでの条件分岐にはJavaScriptを使用する必要があります。 -
可読性を重視する ネストされた
if関数は複雑になると可読性が低下するため、必要に応じてSASSの@mixinや@functionを使用してコードを整理できます。
結論
SASSのif関数は、条件に応じて異なる値を返す強力なツールです。単純な条件分岐だけでなく、テーマの切り替えや動的なスタイル設定など、多くの場面で役立ちます。ただし、複雑な条件を扱う場合には可読性に注意し、@mixinや@functionを活用することでメンテナンス性を向上させることができます。
if関数をマスターすることで、より効率的で柔軟なスタイル設計が可能になります。
YouTubeチャンネルでは、Visual Studio Codeを用いて上記の記事を見ながら確認できます。 ぜひYouTubeチャンネルもご覧ください。