Importation @import et Partials Sass

Sass peut maintenir le code CSS sec (DRY，Don't Repeat Yourself，ne pas répéter soi-même).

L'une des méthodes pour écrire du code DRY consiste à stocker le code pertinent dans des fichiers séparés.

Vous pouvez utiliser des fragments CSS pour créer de petits fichiers et les inclure dans d'autres fichiers Sass. Par exemple, ces fichiers peuvent être : fichiers de reset, variables, couleurs, polices, etc.

Importation de fichiers Sass

Comme pour CSS, Sass prend également en charge @import Instructions.

@import Les instructions vous permettent d'inclure le contenu d'un fichier dans un autre.

Pour des problèmes de performance, CSS @import Les instructions ont un principal inconvénient ; elles créent une requête HTTP supplémentaire à chaque appel. @import Les instructions incluent les fichiers dans le CSS ; donc, au moment de l'exécution, il n'est pas nécessaire d'effectuer des appels HTTP supplémentaires !

Syntaxe d'importation Sass :

@import filename;

Avis :Vous n'avez pas besoin de spécifier l'extension de fichier, Sass supposera automatiquement que vous parlez de fichiers .sass ou .scss. Vous pouvez également importer des fichiers CSS.@import Les instructions d'importation de fichiers, puis vous pouvez utiliser dans le fichier principal toutes les variables ou les mixins définies dans le fichier importé.

Vous pouvez importer un nombre quelconque de fichiers dans le fichier principal :

Exemple

@import "variables";
@import "colors";
@import "reset";

Laissez-nous voir un exemple : supposons que nous ayons un fichier nommé "reset.scss", qui ressemble à ceci :

Syntaxe SCSS (reset.scss) :

html,
body,
ul,
ol {
  margin: 0;
  padding: 0;
}

Nous allons importer le fichier "reset.scss" dans un autre fichier nommé "standard.scss".

Nous procédons ainsi : généralement, nous ajoutons en haut du fichier @import Instructions ; de cette manière, son contenu aura une portée globale :

Syntaxe SCSS (standard.scss) :

@import "reset";
body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  color: red;
}

Par conséquent, lorsque le fichier "standard.css" est traduit, le CSS sera comme suit :

Sortie CSS :

html, body, ul, ol {
  margin: 0;
  padding: 0;
}
body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  color: red;
}

Sass Partials (fichiers locaux)

Par défaut, Sass traduit directement tous les fichiers .scss. Cependant, lors de l'importation de fichiers, vous n'avez pas besoin que les fichiers soient traduits directement.

Sass a un mécanisme : si vous commencez par un trait de soulignement le nom du fichier, Sass ne le traduit pas. Les fichiers ainsi nommés sont appelés partiels dans Sass.

Par conséquent, les fichiers partiels Sass sont nommés avec un trait de soulignement en tête :

Syntaxe de Partial Sass :

_filename;

L'exemple suivant montre un fichier partiel Sass nommé "_colors.scss" (ce fichier ne sera pas directement converti en "colors.css"):

Exemple

"_colors.scss":

$myPink: #EE82EE;
$myBlue: #4169E1;
$myGreen: #8FBC8F;

Maintenant, si vous importez ce fichier partiel, omettez le trait de soulignement. Sass comprend qu'il doit importer le fichier "_colors.scss":

Exemple

@import "colors";
body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  color: $myBlue;
}