MOINS - Extension attachée au sélecteur

La description

Extendest connecté à un sélecteur qui ressemble à une pseudo classe avec sélecteur comme paramètre. Lorsque l'ensemble de règles comporte de nombreux sélecteurs, l'extension de mot-clé peut être appliquée à n'importe lequel des sélecteurs. Le format suivant peut être utilisé pour définir l' extension dans le code.

  • Étendre après le sélecteur [Par exemple: pre: hover: extend (div pre) ]

  • Permet un espace entre le sélecteur et l'extension [Par exemple: pre: hover: extend (div pre) ]

  • Autorise plusieurs extensions [Ex: pre: hover: extend (div pre): extend (.bucket tr) ou pre: hover: extend (div pre, .bucket tr) ]

  • Extend doit être défini à la fin du sélecteur. pre: hover: extend (div pre) .nth-child (impair) type n'est pas autorisé.

Exemple

L'exemple suivant montre l'utilisation de extend attaché au sélecteur dans le fichier LESS -

extend_syntax.htm

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

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

Ensuite, créez le fichier style.less .

sans style

.style,
.container{
   background: #BF70A5;
}

.img,
.container{
   font-size: 45px;
   font-style: italic;
}

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 {
   background: #BF70A5;
}

.container,
.style {
   font-style: italic;
}

.img,
.style {
   font-size: 45px;
}

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.