MOINS - Mot-clé en ligne des options d'importation

La description

le @import (inline)L'instruction copiera votre CSS dans le fichier CSS de sortie sans le traiter. Ceci est utile lorsque le fichier CSS n'est pas MOINS compatible. Bien que LESS prenne en charge la plupart des standards CSS, les commentaires ne sont pas pris en charge à certains endroits et sans modifier le CSS, il ne supportera pas tous les hacks CSS connus. Même si@import (inline)ne traitera pas le CSS, cela garantira que tous vos CSS seront dans un seul fichier. Cela a été publié dans la version 1.5.0.

Exemple

L'exemple suivant illustre l'utilisation du mot-clé de référence dans le fichier LESS -

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

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

Ensuite, créez le fichier style.less .

sans style

@import (inline) "http://www.tutorialspoint.com/less/import_inline.css";
p {
   color:red;
}

Le code suivant importera le import_inline.css fichier dans style.less du chemin avec le code suivant -

import_inline.css

.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;
}

p {
   color: red;
}

Production

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

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

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

Si vous essayez d'utiliser le .style classe à l'intérieur du p faire style.less, il lancera une erreur non définie .