LESS - Modification de l'ordre des sélecteurs

La description

La prépension d'un sélecteur aux sélecteurs hérités (parents) est utile lorsque l'ordre des sélecteurs est modifié. Ceci est réalisé en plaçant&après le sélecteur. Par exemple, lorsque vous utilisez Modernizer, vous souhaiterez peut-être spécifier des règles différentes en fonction des fonctionnalités prises en charge.

Exemple

L'exemple suivant illustre l'utilisation de la modification de l'ordre des sélecteurs dans le fichier LESS -

<html>
   <head>
      <link rel = "stylesheet" href = "changing_selector_order.css" type = "text/css" />
      <title>Parent Selector</title>
   </head>

   <body>
      <div class = "header">
         <div class = "menu">
            <h2>Welcome to TutorialsPoint</h2>
            <p>It is possible to reference the parent selector by using &(ampersand) operator.</p>
         </div>
      </div>
   </body>
</html>

Maintenant, créez le fichier style.less .

sans style

.header {
   .menu {
      border-radius: 5px;
      border: 1px solid red;
      & {
         padding-left: 200px;
      }
   }
}

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

.header .menu {
   border-radius: 5px;
   border: 1px solid red;
   padding-left: 200px;
}

le .no-borderradius & le sélecteur ajoutera .no-borderradius à son sélecteur parent .header .menu

Production

Suivez ces étapes pour voir comment fonctionne le code ci-dessus -

  • Enregistrez le code html ci-dessus dans le changing_selector_order.htm fichier.

  • Ouvrez ce fichier HTML dans un navigateur, la sortie suivante s'affichera.