【CSS Modules】sign()関数の使い方
sign()関数の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
sign()関数は、与えられた数値の符号を判定し、その結果を数値として返すCSS関数です。この関数は、主にCSSカスタムプロパティやcalc()関数内で使用され、スタイリングに条件分岐のようなロジックを導入する際に役立ちます。具体的には、引数として渡された数値が正の値であれば1を、負の値であれば-1を、そして0であれば0を返します。
例えば、要素の幅や位置が正の値か負の値かによって異なるスタイルを適用したい場合に、sign()関数を活用できます。これにより、JavaScriptなどを使わずに、純粋なCSSだけで数値の増減や方向性に基づいた動的な表現が可能になります。たとえば、カスタムプロパティ --offset の値が正であれば要素を右に移動させ、負であれば左に移動させるといった処理を、calc(var(--offset) * sign(var(--offset))) のような形で記述できる可能性があります。
CSS Modulesの環境下では、このsign()関数は、ローカルスコープが適用されたCSSファイル内で、通常のCSS関数と同様に利用可能です。CSS Modulesはクラス名のスコープを限定する機能を提供しますが、CSS関数自体の動作や利用方法に直接的な変更を加えるものではありません。そのため、sign()関数を用いて計算された値は、そのスタイルシートが適用される要素に対して、他のCSSプロパティ値と同様に適用されます。この関数を使用することで、数値データを基にした、より柔軟で表現豊かなCSSスタイリングを実装できるでしょう。
構文(syntax)
1sign(<number>)
引数(parameters)
- number: 数値を指定します
戻り値(return)
CSSのsign()関数は、引数として渡された数値が正、負、またはゼロのいずれであるかに応じて、それぞれ1、-1、または0の数値を返します。