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 le contenu de ce fichier externe sera utilisé dans le fichier scss courant.

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'; Remarquez qu’il n’est pas nécessaire d’inclure le "_" spécifiant qu’il s’agit d’un partial, ni l’extension ".scss" puisque Sass est assez intelligent pour savoir que vous chargez une partial de type Sass.

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.

@use Différence @import et @use

>>> Demo en classe de l'utilisation de partials par Bootstrap et par timdoc.

Utilisation de données logées dans une partial

Si vous souhaitez utiliser des données telles que des @mixin, @extend, $variable etc logées dans une partial importée avec @use, vous devez préfixer la dite données par le nom de la partial suivi d'un point. Par exemple, si vous définissez un ensemble de variables dans une partials variable.scss et que vous souhaitez réutiliser une de ces variables, $mainColor par exemple, dans le ficheir principal de votre scss, vous devriez donc y accéder de cette façon:

@use "variable"; h1 { color: variable.$mainColor; } 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-capitals { font-size: 12px; font-weight: normal; text-transform: uppercase; }

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

1. Importer son module via @use.
2. Inclure la mixin souhaitée.

@use "text"; .hero { @include text.small-capitals; } @use

Groupement de mixins en partials

Il convient grouper dans un même partial des mixins vont bien ensemble, par exemple des styles de modification d'image. Voici quelques exemples de styles de modifications d'une image à partir desquels vous pourriez créer des mixins.