Sass: faire des mixin avec des paramètres extensibles

Sass est un pré-processeur CSS très puissant, notamment grâce à l'usage de ces mixins.

Ces derniers sont à considérés comme des fonctions qui, en fonction de paramètres, va générer un CSS qui va pouvoir s'injecter dans notre code.

J'aimerai vous faire part d'une petite astuce qui permet de rendre flexible l'usage de ces derniers.

En fait, je suis tombé un peu comme on peut l'avoir avec des fonctions JavaScripts: je voulais fournir un nombre de paramètres "importants" (pour moi, dès que cela dépasse 3 paramètres, cela commence à devenir important).

Du coup, en JavaScript, vu que nous n'avons pas de polymorphisme de méthodes, pour éviter d'avoir des méthodes qui ont trop paramètres, on essaie de passer par un objet intermédiaire.

Prenons le cas où nous voulons récupérer une liste d'utilisateurs:

/**
 * @method
 * @param {UserQuery} [query=null]
 * @param {string} [direction='asc']
 * @param {number} [pageSize=50]
 * @param {number} [pageIndex=0]
 * @param {Obersable<User[]>}
 */
function fetchUsers(query, direction, pageSize, pageIndex) {
 // ...
}

Du coup, nous arrivons à avoir des appels à la fonction qui sont parfois ridicule:

fetchUsers(null, 'desc');
fetchUsers({ name: { $start: 'John' } }, undefined, undefined, 10);

Regroupons tout ceci comme si nous avions qu'un seul objet complexe:

/**
 * @method
 * @param {UserFetchOptions} [options]
 */
function fetchUsers(options) {
 // ...
}

Ce qui rend son utilisation plus simple à lire / comprendre et plus logique aussi:

fetchUsers({ direction: 'desc' });
fetchUsers({
 query: { name: { $start: 'John' } },
 pageIndex: 10
});

Du coup, penchons-nous comment faire la même chose au sein de Sass. Il faut savoir que nous avons de la chance: nous pouvons définir des Maps qui permettent de faire le binding d'une valeur vers une propriété (massivement utilisé en tant que "palette" au sein de Angular Material pour gérer le theming). Et pour cela, nous allons la méthode Sass "map-merge"


Prenons notre mixin suivant qui permet de génerer le CSS nécessaire pour mon composant:

@mixin myComponent(options: ()) {
 $options: map-merge(options, (
  color: 'black',
  fontSize: 2.5rem,
  fontWeight: 'bolder',
  // ...
 ));

 // ...
}

Et du coup, nous avons une utilisation qui est simple et extensible:

@include myComponent();
@include myComponent((
 fontSize: 1rem
));
@include myComponent((
 color: 'red',
 fontWeight: 'normal'
));

Enjoy