@Import et partiels dans SASS | Expliqué

L'acronyme SASS pour Stylesheet Syntactical Awesome est un pré-processeur et une extension de CSS qui est réputé pour ses fichiers de code propres et lisibles qui améliorent en conséquence la capacité de la langue CSS de base. Sass vous permet d'écrire le code CSS à sec (ne vous répétez pas) à l'aide de la règle @Import. Ce que cette règle est et fait en Sass avec partiels dans Sass sont les sujets en discussion dans cet article.

Quelle est la règle @Import dans SASS

Tout comme CSS, SASS prend également en charge la directive @Import, qui permet l'inclusion d'une feuille de style dans une autre. Comme extension de la règle CSS @Import, la règle SASS @Import permet l'importation .Sass et .Fichiers SCSS. De plus, si vous importez une feuille de style dans une autre feuille de style, cette règle donnera accès aux variables, mixins et fonctions du fichier importé dans l'autre fichier.

Un autre avantage que cette règle SASS a sur la règle CSS est qu'aucune demande HTTP supplémentaire n'est faite au moment de l'exécution lorsque la règle @Import est appelée.

Syntaxe

@Import FilePath;

La règle SASS @Import permet l'inclusion des deux types, ce qui signifie que vous pouvez inclure des fichiers SASS dans un fichier CSS ou vous pouvez importer des fichiers CSS dans un fichier SASS. De plus, vous pouvez importer autant de fichiers que vous le souhaitez dans le fichier principal. Les fichiers qui peuvent être importés comprennent des fichiers de réinitialisation, des couleurs, des variables, des polices, etc.

Quelques exemples de la règle @Import dans SASS sont les suivants.

@Import "Fonts";
@Import "Variables";
@Import "Colors";

Regardons un exemple pour mieux comprendre cette règle.

Exemple

Supposons que nous ayons un fichier par le fichier de nom1.Sass et ça ressemble à quelque chose comme ça.

Toupet

H1
Font-Family: Verdana, Sans-Serif;
taille de police: 30px;
couleur violet;

Nous avons également un autre fichier par le fichier de nom2.sass et a le code suivant.

Toupet

p
Font-Family: Times New Roman, Serif;
taille de police: 20px;
Couleur bleue;

Maintenant, nous voulons importer ces deux fichiers dans un autre fichier ayant le nom principal.toupet. Nous utiliserons la règle @Import pour le faire.

@Import File1, fichier2

Après avoir compilé ce principal.Fichier SASS Notre fichier de sortie CSS résultant apparaîtra comme celui-ci.

Les fichiers ont été importés avec succès!

Note: L'utilisation de la règle @Import est découragée car elle provoque des conflits de dénomination car il donne accès à toutes les fonctions, variables, mixins, etc. à l'autre fichier. De plus, cela provoque également des problèmes de sécurité.

Partiels en sass

Les partiels en sass sont considérés comme les fichiers dont les noms commencent par un soulignement et ceux-ci ne sont pas transpirés directement. Les partiels ne sont faits que dans les circonstances où vous importez un fichier et ne veulent pas que votre fichier soit transpilé directement par SASS.

Syntaxe

_nom de fichier;

Par exemple, le fichier affiché ci-dessous est un «_font.Fichier SCSS ».

$ FontSize: 20px;
$ Fontfamily: Times New Roman;
$ couleur: bleu;

Le soulignement de départ empêche ce fichier de passer aux polices.CSS. Cependant, lorsque vous souhaitez importer ce fichier, n'utilisez pas le soulignement.

Le soulignement de départ empêche ce fichier de passer aux polices.CSS. Cependant, lorsque vous souhaitez importer ce fichier, n'utilisez pas le soulignement.
@Import "Fonts"
H1
taille de police: $ Fontize;
Texte-aligne; centre;
Couleur: $ couleur;

De cette façon, le fichier SASS partiel sera importé.

Conclusion

La directive SASS @Import permet l'inclusion d'une feuille de style dans une autre et donne accès aux variables, mixins, fonctions du fichier importé dans l'autre fichier. De plus, aucune demande HTTP supplémentaire n'est faite au moment de l'exécution lorsque la règle @Import est appelée. Pendant ce temps, les partiels en SASS sont considérés comme ces fichiers dont les noms commencent par un soulignement et ceux-ci ne sont pas transpirés directement lorsque vous les importez. Ces deux entités sont discutées en profondeur dans cet article.