MOINS - Directives d'importation

La description

le @importdirective est utilisée pour importer les fichiers dans le code. Il répartit le code LESS sur différents fichiers et permet de maintenir facilement la structure du code. Vous pouvez placer les instructions @import n'importe où dans le code.

Par exemple, vous pouvez importer le fichier en utilisant @importmot - clé comme @import "file_name.less" .

Extensions de fichiers

Vous pouvez utiliser les instructions @import en fonction des différentes extensions de fichier telles que -

  • Si vous utilisez l' extension .css , elle sera considérée comme CSS et l' instruction @import reste telle quelle.

  • S'il contient une autre extension, il sera considéré comme MOINS et sera importé.

  • S'il n'y a pas d'extension LESS, elle sera ajoutée et incluse en tant que fichier LESS importé.

@import "style";      // imports the style.less
@import "style.less"; // imports the style.less
@import "style.php";  // imports the style.php as a less file
@import "style.css";  // it will kept the statement as it is

Exemple

L'exemple suivant illustre l'utilisation de la variable dans le fichier SCSS -

<!doctype html>
   <head>
      <title>Import Directives</title>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
   </head>

   <body>
      <h2>Example of Import Directives</h2>
      <p class = "myline">Welcome to Tutorialspoint...</p>
   </body>
</html>

Ensuite, créez le fichier import_dir.less .

import_dir.less

.myline {
   font-size: 20px;
}

Maintenant, créez le fichier style.less .

sans style

@import "http://www.tutorialspoint.com/less/import_dir.less";
.myline {
   color:#FF0000;
}

Le fichier import_dir.less sera importé dans le fichier style.less à partir du chemin.

Vous pouvez compiler le style.less en style.css en utilisant la commande suivante -

lessc style.less style.css

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

style.css

.myline {
   font-size: 20px;
}

.myline {
   color: #FF0000;
}

Production

Suivez ces étapes pour voir comment fonctionne le code ci-dessus -

  • Enregistrez le code html ci-dessus dans le import_directives.html fichier.

  • Ouvrez ce fichier HTML dans un navigateur, la sortie suivante s'affichera.