【Sass】関数を定義する方法

Sass（Syntactically Awesome Stylesheets）は、CSSを強力にするための拡張言語であり、変数、ネスト、ミックスイン、関数などの機能を提供します。今回は、Sassで関数を定義する方法について詳しく解説します。

Sass関数の基本

Sassで関数を定義するには、@functionディレクティブを使用します。関数は特定の値を計算し、その結果を返すために使用されます。以下は基本的な関数の定義方法です。

@function my-function($arg1, $arg2) {
  // 関数の処理
  @return $result;
}

色を明るくする関数の例

Sassの関数を使って、色を明るくする例を見てみましょう。Sassには組み込み関数lightenがありますが、それを利用して独自の関数を作成します。

// 色を明るくする関数
@function lighten-color($color, $amount) {
  @return lighten($color, $amount);
}

// 使用例
$base-color: #3498db;
$lightened-color: lighten-color($base-color, 20%);

body {
  background-color: $lightened-color;
}

この関数は、引数として色と明るくする割合を受け取り、指定した色を明るくして返します。

ピクセルからremへの変換関数

次に、ピクセル単位をrem単位に変換する関数を定義します。この関数は、レスポンシブデザインをサポートするために役立ちます。

// フォントサイズをピクセルからremに変換する関数
@function px-to-rem($px, $base-font-size: 16px) {
  @return $px / $base-font-size * 1rem;
}

// 使用例
$font-size: px-to-rem(24px);

p {
  font-size: $font-size;
}

この関数では、ピクセル単位の値を引数として受け取り、rem単位に変換します。基準となるフォントサイズはデフォルトで16pxに設定されていますが、必要に応じて変更できます。

Sass関数の応用例

関数を使用すると、コードの再利用性が向上し、一貫性のあるスタイルを保つことができます。例えば、以下のように複数の要素に対して同じ関数を適用できます。

$base-color: #e74c3c;

.button {
  background-color: lighten-color($base-color, 15%);
  padding: px-to-rem(10px);
  font-size: px-to-rem(14px);
}

.header {
  background-color: lighten-color($base-color, 20%);
  margin-bottom: px-to-rem(20px);
}

まとめ

Sassで関数を定義することで、CSSの記述がより効率的かつ柔軟になります。@functionディレクティブと@returnディレクティブを使って、自分だけのカスタム関数を作成し、コードの再利用性を高めましょう。今回紹介した例を参考に、様々な関数を作成してみてください。