MOINS - Correspondance exacte avec Extend

La description

Par défaut, le extendrecherchez la correspondance exacte entre les sélecteurs. L'extension n'a pas d'importance lorsqu'il s'agit de deux nième - expressions ayant la même signification, mais elle ne recherche que le même formulaire de commande que celui défini pour le sélecteur.

Exemple

L'exemple suivant montre l'utilisation de la correspondance exacte avec extend dans le fichier LESS -

extend_syntax.htm

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

   <body>
      <div class = "style">
         <h3>Hello!!!!!</h3>
      </div>
      <h4 class = "img">Welcome to TutorialsPoint</h4>
   </body>
</html>

Ensuite, créez le fichier style.less .

sans style

.style h3,
h3.style {
   color: #BF70A5;
   font-style: italic;
}
.img:extend(.style h3){}

Le .style h3 doit être défini de la même manière dans extend que défini pour selector. Si vous définissez dans extend comme .style, alors extend traite cela comme différent.

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 h3,
h3.style,
.img {
   color: #BF70A5;
   font-style: italic;
}

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.