LESS - Espaces de noms et accesseurs

La description

Les espaces de noms sont utilisés pour regrouper les mixins sous un nom commun. En utilisant les espaces de noms, vous pouvez éviter les conflits de nom et encapsuler un groupe de mixins de l'extérieur.

Exemple

L'exemple suivant illustre l'utilisation des espaces de noms et des accesseurs dans le fichier LESS -

<html>
   <head>
      <title>Less Namespaces and Accessors</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
   </head>
   
   <body>
      <h1>Example using Namespaces and Accessors</h1>
      <p class = "myclass">LESS enables customizable, 
      manageable and reusable style sheet for web site.</p>
   </body>
</html>

Créez maintenant le fichier style.less .

sans style

.class1 {
   .class2 {
      .val(@param) {
         font-size: @param;
         color:green;
      }
   }
}

.myclass {
   .class1 > .class2 > .val(20px);
}

Vous pouvez compiler le fichier style.less dans style.css à l'aide de 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

.myclass {
   font-size: 20px;
   color: green;
}

Production

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

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

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