MOINS - Options d'importation une fois mot-clé

La description

le @import (once)Le mot clé garantit que le fichier n'est importé qu'une seule fois et que les instructions d'importation suivantes seront négligées pour ce fichier. Il s'agit du comportement par défaut du@importdéclarations. Cela a été publié dans la version 1.4.0 .

Exemple

L'exemple suivant illustre l'utilisation du mot clé once dans le fichier LESS -

<html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
      <title>Import Options Once</title>
   </head>

   <body>
      <h1>Welcome to Tutorialspoint</h1>
      <p class = "para_1">LESS is a CSS pre-processor that enables customizable, 
      manageable and reusable style sheet for web site.</p>
      <p class = "para_2">LESS is a CSS pre-processor that enables customizable, 
      manageable and reusable style sheet for web site.</p>
   </body>
</html>

Maintenant, créez le fichier style.less .

sans style

@import (once) "http://www.tutorialspoint.com/less/once.less";
@import (once) "http://www.tutorialspoint.com/less/once.less"; // this statement will be ignored
.para_1 {
   color: red;
   .style;
}

.para_2 {
   color: blue;
}

Le code suivant importera le once.less fichier dans style.less de la chemin -

une fois.

.style {
   font-family: "Comic Sans MS";
   font-size: 20px;
}

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

.style {
   font-family: "Comic Sans MS";
   font-size: 20px;
}

.para_1 {
   color: red;
   font-family: "Comic Sans MS";
   font-size: 20px;
}

.para_2 {
   color: blue;
}

Production

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

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

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