Pourquoi « _ » est-il ajouté devant le nom du fichier dans SCSS ?-tutoriel CSS-php.cn

Pourquoi « _ » est-il ajouté devant le nom du fichier dans SCSS ?

WBOY

Libérer： 2023-08-25 14:09:13

avant

1314 Les gens l'ont consulté

Pourquoi « _ » est-il ajouté devant le nom du fichier dans SCSS ?

SCSS permet aux développeurs d'écrire du CSS de manière plus structurée. En outre, nous pouvons créer plusieurs fichiers pour CSS tout en utilisant SCSS et importer les fichiers requis dans le fichier SCSS principal.

Dans ce tutoriel, nous verrons l'objectif d'ajouter « _ » avant le nom du fichier dans SCSS.

Quand faut-il mettre "_" devant un nom de fichier dans SCSS ?

Chaque fois que nous ajoutons -_' avant un nom de fichier dans SCSS, le compilateur ignore le fichier lors de la compilation de SCSS. Si le nom du fichier commence par le caractère "_", le fichier devient un fichier partiel.

Par exemple, nous avons deux fichiers nommés "style.scss" et "_partial.scss". Le compilateur compile uniquement le fichier style.scss et ignore le fichier _partial.scss. Cependant, si nous devons utiliser le css du fichier _partial.scss, nous pouvons l'importer dans le fichier style.scss.

Exemple

L'exemple ci-dessous montre comment utiliser SCSS avec HTML.

Nom du fichier – demo.html

Nous avons ajouté un fichier "style.css" au fichier ci-dessous en utilisant la balise "", qui est générée par le compilateur SCSS. Dans la sortie, l'utilisateur peut observer que CSS est appliqué au texte de l'élément div et que le texte devient en italique.

<html>
<head>
   <link rel = "stylesheet" href = "style.css">
</head>
<body>
   <h2> Using the <i> SCSS </i> with HTML. </h2>
   <div> This is a div element. </div>
</body>
</html>

Copier après la connexion

Nom du fichier – style.scss

Dans le fichier ci-dessous, nous avons créé des variables pour stocker la taille et le style de la police. Après cela, nous utilisons des variables pour styliser l'élément div.

$font-size : 20px;
$font-style: italic;
div {
   font-size: $font-size;
   font-style: $font-style;
}

Copier après la connexion

Nom du fichier – style.css

Chaque fois que nous compilerons le fichier style.scss, il générera le code suivant à utiliser par le fichier html.

div {
   font-size: 20px;
   font-style: italic;
}

Copier après la connexion

Exemple

<html>
<head>
   <style>
      /* compiled scss code */
      div {
         font-size: 20px;
         font-style: italic;
      }
   </style>
</head>
<body>
   <h2> Using the <i> SCSS </i> with HTML. </h2>
   <div> This is a div element. </div>
</body>
</html>

Copier après la connexion

Exemple

Dans cet exemple, nous montrons comment ajouter "_" devant le nom du fichier et comment utiliser son CSS dans le fichier CSS principal.

Nom du fichier – demo.html

Le fichier ci-dessous contient du code HTML simple et contient le fichier "style.css" dans la balise .

<html>
<head>
   <link rel = "stylesheet" href = "style.css">
</head>
<body>
   <h2> Using the <i> SCSS from the _partial.css file </i> with HTML.</h2>
   <div> Content of the div element. </div>
</body>
</html>

Copier après la connexion

Nom du fichier - _partial.css

Les utilisateurs doivent créer un fichier _partial.scss avec "_" devant le nom du fichier. Après cela, l'utilisateur doit ajouter le code suivant dans le fichier. Lorsque nous compilerons le code SCSS, le compilateur ignorera le code de ce fichier

$text-color: blue;
$border-width: 2px;
$border-style: solid;
$border-color: green;

Copier après la connexion

Nom du fichier – style.scss

Maintenant, les utilisateurs doivent ajouter le code suivant au fichier style.scss, qui est le fichier CSS principal. Dans le code ci-dessous, nous avons importé le css du fichier "_partial.css". De cette façon, nous pouvons utiliser le code d’une partie du fichier.

@import "partial"
div {
   color: $text-color;
   border: $border-width $border-style $border-color;
}

Copier après la connexion

Nom du fichier – style.css

Chaque fois que nous compilerons le fichier style.scss, il générera automatiquement le fichier style.css.

div {
   color: blue;
   border: 2px solid green;
}

Copier après la connexion

Exemple

<html>
<head>
   <style>
      /* compiled SCSS code from the _partial.css file */
      div {
         color: blue;
         border: 2px solid green;
      }
   </style>
</head>
<body>
   <h2> Using the <i> SCSS from the _partial.css file </i> with HTML.</h2>
   <div> Content of the div element. </div>
</body>
</html>

Copier après la connexion

La principale motivation pour insérer "_" avant les noms de fichiers dans SCSS est de partialiser le fichier afin que le compilateur puisse l'ignorer. Chaque fois que nous avons besoin d'utiliser le CSS d'un fichier partiel, nous pouvons l'importer dans le fichier principal.

Le principal avantage de l'utilisation de fichiers partiels est que nous n'avons pas besoin d'écrire du code en double, ce qui le rend plus clair. Par exemple, nous pouvons ajouter différents fichiers partiels pour différentes parties de CSS et les utiliser en cas de besoin.

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!