@function (fonctions CSS personnalisées)

Définition

Règle qui déclare une fonction CSS nommée --nom(), avec paramètrès typés, valeurs par défaut et descripteur result ; on l'appelle ensuite comme n'importe quelle fonction. Le résultat peut dépendre d'un @média interne. Disponibilité limitée, non Baseline.

Analogie

Une recette de cuisine réutilisable : mêmes gestes, ingrédients différents.

Exemple de code

@function --transparent(--color <color>, --alpha <number>: 0.8)
  returns <color> {
  result: oklch(from var(--color) l c h / var(--alpha));
}

@function --double(--value) {
  result: calc(var(--value) * 2);
}

.btn {
  background: --transparent(var(--brand), 0.5);
  padding: --double(8px); /* 16px */
}

Cas d'usage

Design systems : factoriser les conversions de couleur, d'espacement ou de tailles fluides sans préprocesseur.

Anti-pattern

Termes liés

Sources

• developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@function