チャプター7では、Sassで使用される関数について解説します。
「CSSを効率的に書く！Sassの入門講座」の第7章です。この講座については以下から確認できます。
関数とは
関数は、決められた処理を一つのまとまりとしてまとめたものです。同じ処理を複数回実行したい場合や、複雑な処理を単純化することができます。Sassでは、内部的に用意されている関数や、自分で定義した関数を使うことができます。
内部的に用意されている関数は非常に多いため覚える必要はありません。
定義されている関数を網羅的に知っておき、使用するタイミングで調べて使えるようになりましょう。
関数の使用方法
Sassでは、内部的に用意されている関数を使うことができます。文字列や色の関数、数学の関数、配列やマップ関数など様々な種類があります。関数を使うには、関数名の後に()をつけて引数を渡します。
以下のサンプルでは、 文字列を大文字に変換するto-upper-case関数を使用しています。
$string: "hello";
$upper: to-upper-case($string); // "HELLO"自作関数の作成
Sassでは、自作の関数を定義することができます。関数を定義するには「@function」を使用します。
以下は、自作の関数を定義する例です。
@function double($n) {
@return $n * 2;
}内部的に用意されている関数
文字列関数について
Sassでは、文字列を操作するための関数が用意されています。例えば、to-upper-case()関数を使用することで、文字列を大文字に変換することができます。
$string: "hello";
$upper: to-upper-case($string); // "HELLO"以下に、よく利用される文字列関数をまとめました。
| 文字列関数 | 説明 |
|---|---|
| str-length(文字列) | 指定した文字列の長さを返します。 |
| str-insert(文字列, 挿入する文字列, 位置) | 指定した文字列の中に、指定した文字列を指定した位置に挿入します。 |
| str-index(文字列, 検索する文字列) | 指定した文字列内で、指定した文字列が最初に現れる位置を返します。 |
| to-upper-case(文字列) | 指定した文字列をすべて大文字にして返します。 |
| to-lower-case(文字列) | 指定した文字列をすべて小文字にして返します。 |
| str-slice(文字列, 開始位置, 長さ) | 指定した文字列から、指定した位置から指定した長さ分の文字を切り出します。 |
| str-reverse(文字列) | 指定した文字列から、文字列を反転します。 |
| str-replace(文字列, 置換前の文字列, 置換後の文字列) | 指定した文字列を、別に指定した文字列に |
色の関数
Sassでは、色を操作するための関数が用意されています。
例えば、lighten()関数を使用することで、指定した色を明るくすることができます。
$color: #000;
$light-color: lighten($color, 20%);以下に、よく利用される色の関数をまとめました。
| 色の関数 | 説明 |
|---|---|
| rgb() | RGB値から色を生成します。 引数には、red, green, blueの3つのカラーコードと、alpha(透明度)を指定します。 |
| rgba() | RGB値から色を生成し、透明度を指定できます。 引数には、red, green, blueの3つのカラーコードと、alpha(透明度)を指定します。 |
| hsl() | HSL値から色を生成します。 引数には、hue, saturation, lightnessの3つのカラーコードを指定します。 |
| hsla() | HSL値から色を生成し、透明度を指定できます。 引数には、hue, saturation, lightnessの3つのカラーコードと、alpha(透明度)を指定します。 |
| lighten() | 指定した色を指定した割合だけ明るくした色を生成します。 引数には、色を指定し、割合を%単位で指定します。 |
| darken() | 指定した色を指定した割合だけ暗くした色を生成します。 引数には、色を指定し、割合を%単位で指定します。 |
| saturate() | 指定した色を指定した割合だけ彩度を上げた色を生成します。 引数には、色を指定し、割合を%単位で指定します。 |
| desaturate() | 指定した色を指定した割合だけ彩度を下げた色を生成します。 引数には、色を指定し、割合を%単位で指定します。 |
| grayscale() | 指定した色をグレースケール化した色を生成します。 引数には、色を指定します。 |
| invert() | 指定した色を反転した色を生成します。 引数には、色を指定します。 |
数学の関数
Sassでは、数学的な演算を行うための関数が用意されています。これらの関数を使用することで、数値を加減乗除するだけでなく、四捨五入や絶対値、平方根や立方根などを求めることができます。
math関数の利用には@useでsass:math を読み込む必要があります。
@use “sass:math”;
以下に、よく利用される数学関数を紹介します。
| 数学の関数 | 説明 | 例 |
|---|---|---|
| math.div($n1, $n2) | 除算（$n1 ÷ $n2） ※ | math.div(100, 5) は 20 |
| math.abs($number) | 絶対値を求める関数です。 | math.abs(-10)は10、math.abs(10)は10 |
| math.ceil($number) | 引数を切り上げる関数です。 | math.ceil(3.14)は4、math.ceil(-3.14)は-3 |
| math.floor($number) | 引数を切り捨てる関数です。 | math.floor(3.14)は3、math.floor(-3.14)は-4。 |
| math.max($number1, $number2, …) | 引数の最大値を求める関数です。 | math.max(1, 2, 3, 4)は4、math.max(-1, -2, -3, -4)は-1 |
| math.min($number1, $number2, …) | 数の最小値を求める関数です。 | math.min(1, 2, 3, 4)は1、math.min(-1, -2, -3, -4)は-4 |
| math.percentage($number) | 引数をパーセント表記の文字列に変更します。 | math.percentage(2) は 200% |
※最新の Sass ではスラッシュ（/）を使った除算（割り算）は非推奨（将来的には廃止）になりました。そのため、除算は math.div() を使用することが推奨されています。
配列の関数
Sassでは、配列を扱うための関数が用意されています。
以下はよく利用される配列の関数です。
| 配列の関数 | 説明 |
|---|---|
| length($list) | 配列の長さを返す関数です。 |
| nth($list, $n) | 配列のn番目の要素を返す関数です。 |
| join($list1, $list2, [$separator]) | 2つの配列を結合します。第3引数に区切り文字を指定することができます。 |
| append($list, $val, [$separator]) | 配列の末尾に値を追加します。第3引数に区切り文字を指定することができます。 |
| zip($lists…) | 複数の配列を結合し、1つの配列を返す関数です。 |
| index($list, $value) | 配列内で指定した値が最初に出現する位置を返す関数です。 |
| slice($list, $start, [$end]) | 配列から、指定した範囲内の要素を抽出した新しい配列を返す関数です。 |
解いてみよう！小テスト：本章の復習
関数について復習しましょう。
問1. 「@function」を使用した場合、どのように出力されるでしょうか？
- 定義した関数で計算される
- 定義した関数をそのまま出力する
- 定義した関数の戻り値を出力する
解答
答え：③定義した関数の戻り値を出力する
問2. 「@function」を使った処理で、「引数$aと$bを足した結果を返すadd関数」を定義したい場合、どのように書くことができるでしょうか？
- @function add($a, $b) { $a + $b }
- @function add { $a + $b }
- @function { add($a, $b) { $a + $b } }
解答
答え：① @function add($a, $b) { $a + $b }
例：.fooのwidthが「300px」になります。
@function add($a, $b) {
@return $a + $b;
}
.foo {
width: add(100px, 200px);
}問3. 「to-upper-case」を使用した場合、どのように出力されるでしょうか？
- 大文字に変換される
- 小文字に変換される
- 大文字小文字が混在する
解答
答え：① 大文字に変換される
例：.fooのcontentが「HELLO WORLD」になります。
$string: "hello world";
$result: to-upper-case($string);
.foo {
content: $result;
}問4. 「math.abs」を使用した場合、どのように出力されるでしょうか？
- 絶対値で出力される
- 絶対値以外の値で出力される
- 絶対値を計算するための数式で出力される
解答
答え：① 絶対値で出力される
math.absは絶対値を求める関数です。
例：.fooのwidthが「10」になります。
$result: math.abs(-10);
.foo {
width: $result;
}問5. 「join」を使用した場合、どのように出力されるでしょうか？
- ２つの配列が結合される
- 配列がそのまま出力される
- 配列を結合するための数式で出力される
解答
答え：① ２つの配列が結合される
joinは2つの配列を結合します。
例：.fooのcontentが「apple banana orange grape mango strawberry」になります。
$items1: "apple", "banana", "orange";
$items2: "grape", "mango", "strawberry";
$result: join($items1, $items2);
.foo {
content: $result;
}これらを実際に実装したサンプルはダウンロード教材のchapter07フォルダで確認できます。
リスキリングでキャリアアップしてみませんか？
リスキリング(学び直し)は、経済産業省が推奨しており、
今だけ、最大７０％のキャッシュバックを受けることができます。
最大70％の給付金が出るおすすめのプログラミングスクール！
国策で予算が決められているため申し込みが多い場合は早期に終了する可能性があります！
興味のある方はすぐに確認しましょう。
チャプター７ 「関数を理解する」のまとめ
チャプター７では、Sassで使用される関数について学びました。
- 自作関数を定義する方法を学びました。自作関数を作成するには、
@functionを使用します。 - 文字列を操作するための関数を学びました。
- 色を操作するための関数を学びました。
- 数学に関する関数を学びました。
- 配列を操作する関数を学びました。
自作関数や、内部的に定義された関数を使用することで、効率的で柔軟なコーディングが可能になります。
チャプター
次章では、Sassの基本の「配列とマップの基本を理解する」学びます。
