Modules

L'une des grandes forces de Sass est de permettre de modulariser son code CSS. Plutôt que d'avoir un immense fichier CSS contenant tous les éléments constituant un site, il est possible de découper en fichiers individuels chaque composante. Simplifiant ainsi le développement et le maintien du site en question.

Partials

Un fichier contenant une seule composante d'un site est appelé un partial. Ce fichier est voué à être importé dans une feuille de style plus générale. Afin de différentier les deux, le nom des partials sont préfixés par une barre de soulignement (_), tandis que le nom des fichiers plus généraux, non.

Par exemple, un fichier contenant la composante d'entête du site uniquement pourrait se nommer _site-header.scss.

@use

Afin d'importer un module ou partial dans une feuille de style, il faut utiliser la commande @use afin d'indiquer que ce fichier est utilisé dans celui-ci.

Par exemple, la feuille de style principale d'un projet pourrait se nommer style.scss et pourrait charger, sous forme de module, le partial contenant la composante d'entête du site:

@use 'site-header';

Il est fréquent qu'une feuille de style globale ne soit constituée que de @use chargeant les différentes composantes d'un site.

Mixins

Il est fréquent qu'un ou des mixins soient importés via @use dans d'autres composantes.

Prenons l'exemple d'un partial intitulé _text.scss. À l'intérieur de ce fichier ne se trouve que des mixins ayant pour but de manipulant l'apparence d'éléments texte. Un des mixins à l'intérieur pourrait ressembler à ceci:

@mixin small-cap {
  font-size: 12px;
  font-weight: normal;
  text-transform: uppercase;
}

Dans un autre partial, hero.scss, il serait possible d'utiliser le mixin small-cap du fichier _text.scss. Pour ce faire, il faudrait:

1. Importer son module via @use.

2. Spécifier où inclure le code de quel mixin.

Par exemple:

@use "text";

.hero {
  @include text.small-cap;
}