Fonctions et mixins personnalisées CSS

Le module des fonctions et mixins personnalisés CSS permet aux développeur·euse·s de créer des blocs réutilisables de code CSS pouvant accepter des arguments, contenir une logique complexe (définie à l'aide de fonctionnalités telles que les fonctions CSS if() et les règles @media) et de retourner des valeurs basées sur cette logique.

Les fonction CSS personnalisées sont définies dans la règle @function et appelées en utilisant la syntaxe <dashed-function>, qui ressemble beaucoup à la syntaxe des propriétés personnalisées CSS sauf qu'elle inclut des parenthèses à la fin contenant des arguments (par exemple, --ma-fonction(30px, 3)). Les fonctions CSS personnalisées peuvent être appelées dans n'importe quelle valeur de propriété et retournent une valeur basée sur les arguments passés à la fonction et la logique à l'intérieur.

Les mixins CSS sont définis dans les règles @mixin et appliqués en utilisant les règles @apply imbriquées à l'intérieur des ensembles de règles. Les mixins CSS définissent un ensemble de propriétés qui peuvent être réutilisées dans plusieurs ensembles de règles et personnalisées avec des arguments et une logique.

Les fonctions et mixins personnalisés en CSS peuvent se voir attribuer des types de données optionnels pour leurs arguments et leurs valeurs de retour, afin de restreindre les valeurs qui leur sont passées et celles qu'ils retournent.