SASS - L'importation

Tout comme vous pouvez séparer votre code CSS pour plus de clarté, il est aussi possible de le faire en Sass.

Prenons l'exemple des variables. Vous pouvez en avoir un certain nombre et elles peuvent prendre beaucoup de place dans un fichier SCSS. Pour gérer cela, il est possible de les écrire dans un fichier à part et de les appeler seulement dans les fichiers nécessaires.

Utilisation

Prenons les variables suivantes. Elles seront stockées dans un fichier nommé _vars.scss :

$red: #FF0000;
$green: #00FF00;
$blue: #0000FF;
$black: #000000;
$white: #FFFFFF;

Maintenant, vous pouvez importer ce fichier dans un autre fichier SCSS avec le mot clé @import, tout comme en CSS :

@import '_vars';

Je n'ai pas besoin de spécifier l'extension du fichier.

Ajoutons un second fichier, _functions.scss que nous souhaitons importer avec les variables. Contrairement au CSS, pas besoin de spécifier une seconde ligne avec @import, je peux importer tous mes fichiers en les séparant avec une simple virgule.

@import '_vars', '_functions';

Pensez bien qu'au moment de l'importation d'un fichier, celui-ci sera évalué comme si son contenu avait été écrit à la place du @import, et que ce contenu sera donc accessible par le reste du fichier, et cela, dans l'ordre d'importation.

Il est possible d'utiliser des chemins relatifs au moment de l'importation.