MOINS - Prolonger "tout"

La description

Lorsque le mot-clé tout est enfin identifié dans leextendargument, alors LESS correspond à ce sélecteur dans le cadre d'un autre sélecteur. La partie du sélecteur qui correspond sera remplacée par extension, créant un nouveau sélecteur.

Exemple

L'exemple suivant illustre l'utilisation de tous les mots clés dans le fichier LESS -

extend_all.htm

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

   <body>
      <div class = "container">
         <h3>Welcome to TutorialsPoint</h3>
         <div class = "style">
            <ul class="nav">
               <li>SASS </li>
               <li>LESS</li>
            </ul>
         </div>
      </div>
   </body>
</html>

Ensuite, créez le fichier style.less .

sans style

.style.nav,
.nav h3 {
   color: orange;
}

.nav {
   &:hover {
      color: green;
   }
}
.container:extend(.nav all) {}

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

.style.nav,
.nav h3,
.style.container,
.container h3 {
   color: orange;
}

.nav:hover,
.container:hover {
   color: green;
}

Production

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

  • Enregistrez le code html ci-dessus dans le extend_all.htm fichier.

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