SASSの関数
この記事ではSASSの関数について説明します。
SASSの関数について基本から応用まで、実務で役立つサンプルを交えて丁寧に説明します。
YouTube Video
SASSの関数
SASSの関数は、再利用可能なロジックをスタイルシート内に閉じ込め、計算・フォーマット・条件分岐を行える強力なツールです。
関数の基本構造と使い方
SASS関数は @function で定義し、@return で値を返します。呼び出しは組み込み関数と同じように行います。
1// Example: Define a simple function that doubles a value
2@function double($n) {
3 @return $n * 2;
4}
5
6// Use the function
7.example {
8 width: double(10px); // -> 20px
9}- このコードは数値を2倍にする関数を定義し、幅に適用しています。結果として
.example { width: 20px; }が生成されます。
引数、デフォルト値、型の扱い
関数は複数の引数を受け取れ、デフォルト値も設定できます。SASSは静的な型付けはしませんが、引数の形式に注意して作ると堅牢になります。
1// Example: Function with default parameters
2@function responsive-font($base-size, $scale: 1.2, $unit: px) {
3 @return $base-size * $scale + $unit;
4}
5
6.title {
7 font-size: responsive-font(16, 1.25); // -> 20px
8}responsive-fontはデフォルトでscaleとunitを持ち、呼び出し時に一部省略できます。この例ではfont-size: 20px;のような値が出力されます。
可変長引数（...）の使用
複数の値を渡したい時は可変長引数を使います。リストや複数の色処理などで有用です。
1// Example: Sum any number of numbers passed in
2@function sum-all($numbers...) {
3 $total: 0;
4 @each $n in $numbers {
5 $total: $total + $n;
6 }
7 @return $total;
8}
9
10.box {
11 padding: sum-all(4px, 6px, 10px); // -> 20px
12}- 可変長引数
$numbers...はリストとして扱われ、@eachで処理できます。この例ではpadding: 20px;が出力されます。
リストやマップの返却・操作
関数はリスト（スペース／カンマ区切り）やマップも返せます。複雑な値の返却に便利です。
1@use "sass:map";
2
3// Example: Return a map of spacing scale
4@function spacing-scale($base) {
5 @return (
6 'small': $base * 0.5,
7 'medium': $base,
8 'large': $base * 2
9 );
10}
11
12$scale: spacing-scale(8px);
13
14.card {
15 margin-bottom: map.get($scale, 'medium');
16}- 関数でマップを返し、その後
map.getで値を取り出しています。これにより一貫性のあるスペーシング体系を保てます。
条件分岐とループを使った関数
@if, @else if, @else, @for, @each, @while は関数内でも使えます。条件やループで計算ロジックを組めます。
1// Example: Generate modular scale value using loop
2@function modular-scale($step, $base: 1rem, $ratio: 1.25) {
3 $result: $base;
4 @if $step == 0 {
5 @return $result;
6 }
7 @if $step > 0 {
8 @for $i from 1 through $step {
9 $result: $result * $ratio;
10 }
11 } @else {
12 @for $i from 1 through abs($step) {
13 $result: $result / $ratio;
14 }
15 }
16 @return $result;
17}
18
19.h1 {
20 font-size: modular-scale(3, 1rem, 1.333);
21}- この関数はモジュラースケールを計算し、正負のステップに応じて乗算／除算します。
modular-scale(3, 1rem, 1.333)は 3 ステップ上のフォントサイズを返します。
エラー処理と警告（@error, @warn）
不正な引数や想定外の操作には @error で停止、@warn で警告できます。ユーザーに早めに問題を知らせるのが目的です。
1@use "sass:math";
2@use "sass:meta";
3
4// Example: Validate input and throw an error for invalid units
5@function ensure-length($value) {
6 @if meta.type-of($value) != 'number' or math.is-unitless($value) {
7 @error "Expected a length with units, got #{$value}.";
8 }
9 @return $value;
10}
11
12// Valid input (should pass)
13.test-valid {
14 width: ensure-length(10px); // expect: 10px
15}
16
17// Invalid input (should throw error during compilation)
18// Uncomment the following to test error handling:
19//
20// .test-invalid {
21// // expect error: "Expected a length with units, got 10."
22// width: ensure-length(10);
23// }- 不正な値を渡すとビルド時にエラーが出力され、原因が分かりやすくなります。早期にバグを検出するために関数内でのチェックは有用です。
色操作に特化した関数の作り方
SASSでは、色を操作するさまざまな関数を組み合わせて、独自のカラーパレットを作成できます。プロジェクト全体で一貫した配色を管理する際に役立ちます。
1@use "sass:color";
2@use "sass:list";
3
4// Example: Generate a color palette (tints and shades) from a base color
5@function palette($color, $steps: 5, $strength: 10%) {
6 $colors: ();
7 @for $i from 0 through $steps {
8 $amount: $i * $strength;
9 $shade: if($i == 0, $color, color.mix(black, $color, $amount));
10 $tint: color.mix(white, $color, $amount);
11 $colors: list.append($colors, $shade);
12 $colors: list.append($colors, $tint);
13 }
14 @return $colors;
15}
16
17$palette: palette(#3498db, 3, 15%);
18
19.btn {
20 background-color: list.nth($palette, 1);
21}- この例では
color.mixを用い、黒との混合でシェード、白との混合でティントを生成しています。返却はリストで行い、list.nthで取り出して使えます。
パフォーマンスとコンパイル時間に関する注意
SASS関数はコンパイル時に評価されます。重いループや深い再帰、膨大なマップ操作はコンパイル時間を増やします。関数は小さくシンプルに保ち、複雑な処理はビルドツールやプリプロセッサの外で行うことも検討できます。
実践的なユーティリティ関数集
よく使うユーティリティ関数をいくつか紹介します。コードは実務ですぐに使えるように設計しています。
1@use "sass:math";
2
3// Example: Clamp a value between min and max
4@function clamp-value($value, $min, $max) {
5 @if $value < $min {
6 @return $min;
7 } @else if $value > $max {
8 @return $max;
9 }
10 @return $value;
11}
12
13// Example: Convert px to rem (with optional root size)
14@function px-to-rem($px, $root: 16px) {
15 @if math.unit($px) != "px" {
16 @error "px-to-rem requires a px value.";
17 }
18 @return ($px / $root) * 1rem;
19}clamp-valueは値の上限下限を強制し、px-to-remはピクセル値を rem に変換します。どちらもレスポンシブ設計で頻繁に出てくる処理を簡潔にします。
@function とミックスイン（@mixin）の使い分け
関数は値を返すことに特化し、ミックスインはCSSブロックを出力します。ロジックの結果がプロパティ単体の値なら関数、スタイルブロック全体ならミックスインが適切です。
1// Example: Function returns a value
2@function border-radius-value($size) {
3 @return $size * 1px;
4}
5
6// Example: Mixin outputs properties
7@mixin rounded($size) {
8 border-radius: border-radius-value($size);
9 -webkit-border-radius: border-radius-value($size);
10}
11.card {
12 @include rounded(8);
13}- 関数は数値や色などの値を返して他のプロパティに使い、ミックスインはプロパティ群を直接挿入します。設計上の分離を徹底すると保守性が高まります。
文字列操作と出力形式の注意点
SASSでは数値と単位、文字列の取り扱いに注意が必要です。単位付の数値に文字列を連結すると意図しない出力になることがあります。必要に応じて unquote() や #{} 補間を使います。
1@use "sass:math";
2
3// Example: Safely create a CSS value string
4@function px-percentage($px, $total) {
5 $percent: math.div($px, $total) * 100;
6 @return "#{$percent}%";
7}
8
9// Safer with interpolation and math module
10@function px-percentage-safe($px, $total) {
11 $percent: math.div($px, $total) * 100;
12 // Round to 2 decimal places safely
13 $rounded: math.div(math.round($percent * 100), 100);
14 @return "#{$rounded}%";
15}- 文字列としてパーセンテージを返す際は補間や
roundを使って精度を管理すると見通しが良くなります。演算の結果と文字列の連結は型を明確に扱ってバグを避けましょう。
テストとドキュメントのベストプラクティス
関数を書いたら小さな SCSS ファイルで使い方を示すテストを作ると保守しやすくなります。各関数について、入力の型・単位、返却値の型、失敗時の挙動および例をドキュメント化できます。
1@use "sass:math";
2
3// Example: Inline "tests" (partial usage examples)
4// These can be compiled separately during development
5
6@function double($n) {
7 @return $n * 2;
8}
9
10@function px-to-rem($px, $root: 16px) {
11 @if math.unit($px) != "px" {
12 @error "px-to-rem requires a px value.";
13 }
14 @return math.div($px, $root) * 1rem;
15}
16
17// Test double()
18.test-double {
19 width: double(12px); // expect 24px
20}
21
22// Test px-to-rem()
23.test-rem {
24 font-size: px-to-rem(18px, 18px); // expect 1rem
25}
26
27// --- Inline debug tests ---
28@debug "double(12px) => #{double(12px)} (expect 24px)";
29@debug "px-to-rem(18px, 18px) => #{px-to-rem(18px, 18px)} (expect 1rem)";- 小さな「期待される出力」をコメントに残すことで、将来的なリファクタ時に回帰がわかりやすくなります。CI環境で自動コンパイルを行い、出力を目視確認するのが有効です。
まとめ
SASSの関数は、スタイルの再利用と一貫性を高める強力な手段です。小さくシンプルに設計し、@error や @warn で安全性を確保しましょう。色やスペーシング、単位変換などのユーティリティ関数は共通ライブラリにまとめると便利です。複雑な処理はコンパイル負荷を避けるため、必要に応じて他のビルド工程に分離することも検討してください。
YouTubeチャンネルでは、Visual Studio Codeを用いて上記の記事を見ながら確認できます。 ぜひYouTubeチャンネルもご覧ください。