Fonctions

Les @functions permettent de gérer des opérations complexes, de manipuler un ou plusieurs paramètres et de retourner des résultats précis. Elles sont généralement utilisées afin de produire des valeurs.

Par exemple, une variable d'espacement $gutter: 26px; pourrait nécessitée d'être divisée en deux lorsque deux éléments l'utilisant se suivent afin d'éviter que l'espacement soit doublé. Pour palier à ce problème, il serait possible de se créer une fonction divisant cette valeur:

@function half($num) { @return $num / 2; }

Ainsi il serait possible d'écrire:

.card { padding: half($gutter); // 13px } Remarquez @return qui indique quel élément dans la fonction doit être retourné.

Pourquoi ne pas utiliser calc() plutôt? La fonction calc() est interprété dans le navigateur donc demande quelques fractions de seconde de plus à votre navigateur afin d'afficher, tandis que tout calcul effectué directement via SASS est effectué au moment de la compilation et donc n'engendre aucun délais pour l'usager.

@function

EXERCICE Jeu Uno avec @function Pour cet exercice, vous devez styler plusieurs cartes Uno.