MOINS - Étendre l'ensemble de règles internes

La description

le &:extend(selector)La syntaxe peut être placée dans le corps du jeu de règles. Il s'agit d'un raccourci permettant de placer une extension dans chaque sélecteur de l'ensemble de règles.

Exemple

L'exemple suivant montre l'utilisation d'étendre à l'intérieur de l'ensemble de règles dans le fichier LESS -

extend_syntax.htm

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

   <body>
      <div class = "style">
         <h1>Welcome to TutorialsPoint</h1>
         <div class = "container">
            <h2>Hello!!!!!</h2>
         </div>
      </div>
   </body>
</html>

Ensuite, créez le fichier style.less .

sans style

.container,
.style {
   &:extend(.img);
}

.img{
   font-style: italic;
   background-color: #7B68EE;
}

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

.img,
.container,
.style {
   font-style: italic;
   background-color: #7B68EE;
}

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.