Sassで計算式などの関数を使用する方法にについて解説します。
近年のWeb制作では、フォント単位の多様化やレスポンシブデザインの普及により、CSS内で計算式を使用するケースが増えています。
そのような時に、Sassの関数を活用することでスタイルを効率的に記述できます。
この記事では、Sassの関数を使った計算式の活用方法について詳しく解説します。
おすすめの書籍
INDEX
Sassの関数とは
Sassの関数は、スタイルシートの中で特定の値を受け取り、それを処理した後に新しい値を返す機能です。
このような関数を使うことで、同じ計算を複数箇所で繰り返す必要がなくなり、スタイルシートのメンテナンス性が向上します。
Sassで自作の計算式を作る方法
関数は@functionを使用して定義されます。
関数名、引数、そして戻り値を設定することで、オリジナルの関数を作成できます。
@function 関数名($引数1, $引数2, ...) {
// 処理内容
@return 戻り値;
}それでは、実際にピクセルからremなどの相対的な値に変換する関数を例に、オリジナルの関数を作成する方法について解説していきます。
関数を定義
@functionの後にremという関数名を作成し、$sizeという引数を設定しています。
そして、@returnの後に、設定した引数$sizeを含めた計算式を記述しています。
@function rem($size) {
@return $size / 16 * 1rem;
}関数を呼び出す
関数を使用するには、以下のように関数名(引数)を指定して呼び出します。
@function rem($size) {
@return $size / 16 * 1rem;
}
// 呼び出し時
p {
font-size: rem(16);
}コンパイルすると、関数で定義した計算式の内容が反映されてコンパイルされます。
p {
font-size: 1rem;
}別ファイル内の関数を使用する
最後に、別ファイルで定義された関数を呼び出して使用する方法について解説します。
大規模な開発プロジェクトでは、メンテナンス性を高めるために、関数などのモジュールを別ファイルで管理することが一般的です。
これにより、コードの重複を避け、一貫性のあるスタイルを維持することが容易になります。
関数をパーシャルファイルとして作成する
Sassでは、ファイルを分割して管理することをパーシャルと呼びます。
パーシャルファイルを作成する場合は、ファイル名の先頭に_をつけます。これにより、パーシャルファイルはSassのコンパイル対象から除外されます。
それでは、以下のように関数を含むファイルを_function.scssという名前のパーシャルファイルに移動しましょう。
style.scss
_function.scss@function rem($size) {
@return $size / 16 * 1rem;
}別ファイルの関数を呼び出して使用する。
別ファイルの関数を使用する際は@useを使用してパーシャルファイルを相対パスで指定します。
その際、パーシャルファイルの先頭の_と.scss拡張子は省略することができます。
関数を使用する場合は、@useで指定したファイル名の後にピリオド(.)を付けて関数の名前を指定します。
@use 'function';
p {
font-size: function.rem(16);
}この状態でSassをコンパイルして、関数の内容が反映された状態でCSSが作成されていれば成功です。
p {
font-size: 1rem;
}また、パーシャル（ファイル分割）の使い方については、以下の記事でより詳しく解説しています。
まとめ
関数を使用することで、フォントサイズや間隔などの値を柔軟に計算し、スタイルシートのメンテナンス性を向上させることができます。
また、関数を呼び出すことで、計算結果が即座に反映されるため、効率的な開発作業が可能になります。
是非、関数を活用して、よりメンテナブルの高い、柔軟なスタイル管理を実現しましょう。
