@import qui nous permet d’importer des règles dans une feuille de style à partir d’autres fichiers CSS.
Cette option nous permet théoriquement de diviser notre code en différents fichiers afin que celui-ci soit plus facile à gérer sans aucun inconvénient puisque nous pourrons ensuite tout réimporter dans un seul fichier.
En pratique, cependant, l’importation CSS possède un défaut majeur : une nouvelle requête HTTP est envoyée à chaque fois qu’on utilise @import, ce qui peut avoir un impact majeur sur la performance d’un site web si on abuse de cette règle.
Sass s’appuie sur cette règle @import et nous offre une option d’importation avec @import moins gourmande en termes de ressources puisqu’au lieu de créer une nouvelle requête HTTP Sass va récupérer le fichier qu’on souhaite importer et le combiner avec le fichier dans lequel on l’importe afin de n’envoyer au final qu’une seule feuille de style au navigateur.
Les importations Sass ont la même syntaxe que les importations CSS, à la différence près qu’elles permettent à plusieurs importations d’être séparées par des virgules plutôt que d’exiger que chacune ait son propre @import.
Lorsque Sass importe un fichier, ce fichier est évalué comme si son contenu apparaissait directement à la place de @import. Cela implique que tous les mixins, fonctions et variables du fichier importé sont mis à disposition et que tout le code CSS est inclus exactement à l’endroit où l’@import a été fait.
De plus, tous les mixins, fonctions ou variables définis dans la feuille qui importe et avant l’importation sont utilisables par la feuille de style importée.
Enfin, notez que Sass importe les fichiers à partir de leur URL. On peut cependant mentionner un chemin de fichier relatif lors de l’importation. De plus, il n’est pas nécessaire de préciser l’extension du fichier : Sass se chargera de trouver les fichiers de styles correspondants au nom et de les importer.
