MOINS - Prolonger

Extend est une pseudo-classe LESS qui étend d'autres styles de sélecteur dans un sélecteur en utilisant :extend sélecteur.

Exemple

L'exemple suivant illustre l'utilisation de 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">
         <h2>Welcome to TutorialsPoint</h2>
         <p>Hello!!!!!</p>
      </div>
   </body>
</html>

Ensuite, créez le fichier style.less .

sans style

h2 {
   &:extend(.style);
   font-style: italic;
}

.style {
   background: green;
}

Vous pouvez compiler le fichier extend.less vers extend.css en utilisant 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

h2 {
   font-style: italic;
}

.style,
h2 {
   background: blue;
}

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.

Extension de la syntaxe

Extend est placé dans un jeu de règles ou attaché à un sélecteur. Il est similaire à une pseudo classe contenant une ou plusieurs classes, séparées par des virgules. Utilisation du mot-clé facultatifall, chaque sélecteur peut être suivi.

Exemple

L'exemple suivant illustre l'utilisation de la syntaxe d'extension 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>

Créez maintenant le fichier style.less .

sans style

.style:extend(.container, .img) {
   background: #BF70A5;
}

.container {
   font-style: italic;
}

.img {
   font-size: 30px;
}

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: 30px;
}

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.

Le tableau suivant répertorie tous les types de syntaxe d'extension que vous pouvez utiliser dans LESS -

N ° Sr. Types et description
1 Étendre attaché au sélecteur

Extend est connecté à un sélecteur qui ressemble à une pseudo classe avec sélecteur comme paramètre.
2 Étendre le jeu de règles intérieur

le &:extend(selector) La syntaxe peut être placée dans le corps du jeu de règles.
3 Extension des sélecteurs imbriqués

Les sélecteurs imbriqués sont mis en correspondance à l'aide du sélecteur d' extension .
4 Correspondance exacte avec Extend

Par défaut, extend recherche la correspondance exacte entre les sélecteurs.
5 nième expression

La forme de la nième expression est importante en extension sinon, elle traite le sélecteur comme différent.
6 Prolonger "tout"

Lorsque le mot-clé tout est enfin identifié dans leextend L'argument puis LESS correspond à ce sélecteur dans le cadre d'un autre sélecteur.
sept Interpolation de sélecteur avec extension

le extend peut être connecté au sélecteur interpolé.
8 Scoping / Extension dans @media

Extend correspond uniquement au sélecteur présent dans la même déclaration de média.
9 Détection de duplication

Il ne peut pas détecter la duplication des sélecteurs.

Voici les types de cas d'utilisation pour Extend

N ° Sr. Types et description
1 Cas d'utilisation classique

Un cas d'utilisation classique est utilisé pour éviter d'ajouter la classe de base dans LESS.
2 Réduire la taille CSS

Étendre est utilisé pour déplacer le sélecteur jusqu'aux propriétés que vous souhaitez utiliser; cela aide à réduire le code généré par css.
3 Combiner des styles / Un mixin plus avancé

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