LESS - Interpolation de sélecteur avec extension

La description

le @{variable} Le symbole est utilisé dans le cadre du nom de la variable, de l'identifiant et du nom de la classe. Extendn'a pas la capacité de faire correspondre le sélecteur avec des variables. Extend peut être connecté au sélecteur interpolé.

Exemple

L'exemple suivant montre l'utilisation de l'interpolation de sélecteur avec extension dans le fichier LESS -

extend_syntax.htm

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

   <body>
      <h2 class = "style">This is a simple example of Selector Interpolation</h2>
      <p class = "style">This is a simple example of Selector Interpolation</p>
   </body>
</html>

Ensuite, créez le fichier style.less .

sans style

.style {
   color: #BF70A5;
   font-style: italic;
}
@{variable}:extend(.style) {}
@variable: .selector;

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,
.selector {
   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.