Combiner des styles / Un mixin plus avancé

La description

En utilisant Extend, nous pouvons combiner les mêmes styles d'un sélecteur particulier dans un autre sélecteur.

Exemple

L'exemple suivant décrit l'utilisation de la combinaison de styles mixin dans le fichier LESS -

extend_syntax.htm

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

   <body>
      <div class = "cont">
         <h2>Welcome to TutorialsPoint</h2>
         <p>The largest Tutorials Library on the web.</p>
         <ul class = "nav">
            <li>HTML</li>
            <li>SASS</li>
            <li>LESS</li>
         </ul>
      </div>
   </body>
</html>

Ensuite, créez le fichier style.less .

sans style

ul.nav > li {
   background-color: #6DE6E6;
   color: black;
}

.cont {
   &:extend(ul.nav > li);
}

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

ul.nav > li,
.cont {
   background-color: #6DE6E6;
   color: black;
}

Production

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

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

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