CSS カスタム関数とミックスイン

CSS カスタム関数とミックスインモジュールにより、開発者が引数を受け取り、複雑なロジック（CSS の if() 関数や @media アットルールなどの機能で定義）を含み、そのロジックに基づいて値を返す、再利用可能な CSS コードブロックを生成できます。

CSS カスタム関数は @function アットルールで定義され、 <dashed-function> 構文で呼び出されます。これは CSS カスタムプロパティ構文とよく似ていますが、末尾に引数を記載する括弧が付加される点が異なります （--my-function(30px, 3) など）。CSS カスタム関数はいかなるプロパティ値内でも呼び出され、関数に渡された引数と内部ロジックに基づいて値を返します。

CSS ミックスインは @mixin アットルールで定義され、ルールセット内に含まれた @apply アットルールを使用して適用されます。CSS のミックスインは、複数のルールセット内で再利用可能であり、引数やロジックでカスタマイズできるプロパティのセットを定義します。

CSS カスタム関数とミックスインには、引数と返値に対してオプションのデータ型を割り当てることが可能で、それにより渡される値と返される値を制限できます。