A quoi sert la fonction SASS @import ?

SASS est un préprocesseur CSS qui garde le code CSS au sec en empêchant la duplication dans le code. Il existe différentes directives disponibles dans SASS, l'une d'elles est la directive @import.

La directive '@import' est utilisée pour importer le code d'un fichier '.scss' ou '.sass' dans un autre fichier et l'exécuter lors de la compilation. Nous pouvons utiliser la directive "@import" pour importer des variables, des fonctions, des mixins, etc. d'un fichier à un autre.

Grammaire

Les utilisateurs peuvent utiliser la directive '@import' dans SASS pour importer des fichiers selon la syntaxe suivante.

@import 'test'

Nous avons importé le fichier 'test.scss' ou 'test.sass' dans la syntaxe ci-dessus. Ici, nous n'avons pas besoin de préciser l'extension du fichier lors de l'importation du code, le compilateur la détectera automatiquement.

Si l'utilisateur souhaite importer plusieurs fichiers CSS dans un seul fichier, la syntaxe suivante doit être utilisée.

@import 'file1', 'file2', 'file3', 'file4', ...

Voyons maintenant comment importer un fichier à l'aide de la directive @import avec un exemple.

Exemple 1

Exemple 1

Dans l'exemple ci-dessous, nous avons ajouté quelques variables dans le fichier "font.scss". Après cela, nous utilisons la directive "@import" pour importer le contenu du fichier "fonts.scss" dans le fichier "styles.scss".

Dans le fichier "style.scss", nous utilisons les variables du fichier "font.scss". Après cela, nous avons compilé le code du fichier « styles.scss » et l'utilisateur peut observer le code mis à jour du fichier « style.css » dans l'image de sortie.

Nom du fichier - Style.scss

@import "fonts";
$height: 5rem;
$border: 2px, solid, blue;
div {
   height: $height;
   border: $border;
   border-radius: 1rem;
}
h1 {
   font-size: $heading-font-size;
   font-weight: $heading-font-weight;
   color: $heading-font-color;
   font-family: $heading-font-family;
}
p {
   font-size: $paragraph-font-size;
   font-weight: 200;
}

Nom du fichier - Fonts.scss

$normal-font-size: 1rem;
$paragraph-font-size: 1.2rem;
$heading-font-size: 1.5rem;
$heading-font-weight: 700;
$heading-font-color: #000;
$heading-font-family: "Roboto", sans-serif;

Sortie

Exemple 2

Exemple 2

Dans l'exemple ci-dessous, nous ajoutons des variables liées à la couleur au fichier « color.scss » et des variables liées à la police au fichier « fonts.scss ». Dans le fichier "style.scss", nous utilisons la directive "@import" pour importer les fichiers "fonts.scss" et "colors.scss" ensemble.

Dans le fichier "style.scss", nous utilisons des variables de couleur et de police. Dans la sortie, l'utilisateur peut observer les valeurs de propriétés CSS spécifiques dans lesquelles nous utilisons des variables.

Nom du fichier - Style.scss

@import "fonts", "colors";
div {
   color: $text-color;
   background-color: $background-color;
}
ul {
   li {
      color: $text-color;
      background-color: $background-color;
      font-size: $normal-font-size;
   }
}
h1 {
   color: $primary-color;
   font-size: $heading-font-size;
   font-weight: $heading-font-weight;
   font-family: $heading-font-family;
}

Nom du fichier - Colors.scss

$text-color: #000;
$background-color: #fff;
$primary-color: #000;
$secondary-color: #fff;
$tertiary-color: #000;

Nom du fichier - Fonts.scss

$normal-font-size: 1rem;
$paragraph-font-size: 1.2rem;
$heading-font-size: 1.5rem;
$heading-font-weight: 700;
$heading-font-family: "Roboto", sans-serif;

Sortie

Avantages de l'utilisation de la directive @import

L'utilisation de la directive "@import" présente certains avantages, que nous expliquons ci-dessous.

• Nous pouvons importer le code CSS d'un fichier dans un autre fichier.

• Nous pouvons créer un fichier CSS distinct pour chaque composant du code et l'importer si nécessaire.

Inconvénients de l'utilisation de la directive @import

L'utilisation de la directive '@import' présente certains inconvénients, que nous expliquons ci-dessous.

• Il rend tout ce qui se trouve dans le fichier CSS, comme les variables, les fonctions, les mixins, etc., accessible globalement. Il est donc difficile pour les développeurs de déterminer où une variable spécifique est définie.

• Étant donné que tout dans chaque fichier importé devient global, chaque fichier doit avoir des noms de variables différents pour éviter les conflits.

• Le compilateur SASS compile chaque fichier scss, qu'il soit importé ou non, ce qui augmente le temps de compilation et réduit l'efficacité du code.

Utilisation de fichiers partiels dans SASS

Pour résoudre les lacunes ci-dessus, nous pouvons utiliser des partiels dans SASS. Nous pouvons créer un fichier scss partiel en préfixant le nom du fichier avec un trait de soulignement. Par exemple, « _test.scss », « _colors.scss », etc.

Chaque fois que nous utilisons des partiels, le traducteur SASS ne compilera pas le code du fichier partiel, ce qui peut améliorer l'efficacité du code. Cependant, nous pouvons importer le contenu du fichier scss partiel dans le fichier scss principal.

Ceci est un exemple utilisant des fichiers scss partiels.

Exemple 3

Dans l'exemple ci-dessous, nous avons créé le fichier partiel '_colors.scss' et l'avons importé dans le fichier 'style.scss'. Dans cet exemple, le code se compile plus efficacement car nous utilisons des fichiers partiels.

Cependant, la sortie du code reste la même, que nous utilisions ou non des parties du code.

Nom du fichier - Style.scss

@import "colors";
img {
   width: 100%;
   height: 100%;
   background-color: $background-color;
}
p {
   color: $text-color;
}

Nom du fichier - _Color.scss

$text-color: #000;
$background-color: #fff;
$primary-color: #000;
$secondary-color: #fff;
$tertiary-color: #000;

Sortie

Les utilisateurs ont appris à utiliser la directive "@import" pour importer le code d'un fichier dans un autre fichier. Cela nous aide à diviser le code SCSS en morceaux plus petits et à éviter la duplication. Cependant, l'utilisation de la directive @import présente certains inconvénients, mais nous pouvons utiliser des partiels pour résoudre ce problème.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!