Sass - Directives d'importation

La description

Importez les directives, importe les fichiers SASS ou SCSS. Il prend directement le nom de fichier à importer. Tous les fichiers importés dans SASS seront combinés dans un seul fichier CSS. Il y a peu de choses qui sont compilées dans un CSS lorsque nous utilisons la règle @import -

Extension de fichier .css
Le nom de fichier commence par http: //
Le nom de fichier est url ()
@import comprend toutes les requêtes multimédias.

Par exemple, créez un fichier SASS avec le code suivant -

@import "style.css";
@import "http://tutorialspoint.com/bar";
@import url(style);
@import "style" screen;

Vous pouvez dire à SASS de regarder le fichier et de mettre à jour le CSS chaque fois que le fichier SASS change, en utilisant la commande suivante -

sass --watch C:\ruby\lib\sass\style.scss:style.css

Le code ci-dessus sera compilé dans le fichier CSS comme indiqué ci-dessous -

@import url(style.css);
@import "http://tutorialspoint.com/bar";
@import url(style);
@import "style" screen;

Voici les façons d'importer des fichiers à l'aide de la règle @import -

Partiels

Les partiels sont des fichiers SASS ou SCSS, qui sont écrits en utilisant un trait de soulignement au début du nom (_partials.scss). Le nom de fichier partiel peut être importé dans un fichier SASS sans utiliser le trait de soulignement. SASS ne compile pas le fichier CSS. En utilisant le trait de soulignement, il fait comprendre à SASS qu'il est partiel et ne doit pas générer le fichier CSS.

Nested @import

La directive @import peut être incluse dans les règles @media et les règles CSS. Le fichier de niveau de base importe le contenu de l'autre fichier importé. La règle d'importation est imbriquée au même endroit que le premier @import .

Par exemple, créez un fichier SASS avec le code suivant -

.container {
   background: #ffff;
}

Importez le fichier ci-dessus dans le fichier SASS suivant comme indiqué ci-dessous -

h4 {
   @import "example";
}

Le code ci-dessus sera compilé dans le fichier CSS comme indiqué ci-dessous -

h4 .container {
   background: #ffff;
}

Syntaxe

Vous trouverez ci-dessous une syntaxe, utilisée pour importer des fichiers, dans le fichier SCSS -

@import 'stylesheet'

Exemple

L'exemple suivant illustre l'utilisation de @import dans le fichier SCSS -

import.htm

<html>
   <head>
      <title>Import example of sass</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css"/>
   </head>

   <body class = "container">
      <h1>Example using Import</h1>
      <h4>Import the files in SASS</h4>
      <ul>
         <li>Red</li>
         <li>Green</li>
      </ul>
   </body>
</html>

Ensuite, créez le fichier _partial.scss .

_partial.scss

ul{
   margin: 0;
   padding: 1;
}

li{
   color: #680000;
}

Ensuite, créez le fichier style.scss .

style.scss

@import "partial";
.container {
   background: #ffff;
}

h1 {
   color: #77C1EF;
}

h4 {
   color: #B98D25;
}

Vous pouvez dire à SASS de regarder le fichier et de mettre à jour le CSS chaque fois que le fichier SASS change, en utilisant la commande suivante -

sass --watch C:\ruby\lib\sass\style.scss:style.css

Ensuite, exécutez la commande ci-dessus; il créera automatiquement le fichier style.css avec le code suivant -

style.css

ul {
  margin: 0;
  padding: 1; }

li {
  color: #680000; }

.container {
  background: #ffff; }

h1 {
  color: #77C1EF; }

h4 {
  color: #B98D25; }

Production

Exécutons les étapes suivantes pour voir comment fonctionne le code donné ci-dessus -

Enregistrez le code html ci-dessus dans import.html fichier.
Ouvrez ce fichier HTML dans un navigateur, une sortie s'affiche comme indiqué ci-dessous.

↰ Previous page