LESS - Règles imbriquées

La description

C'est un groupe de propriétés CSS qui permet d'utiliser les propriétés d'une classe dans une autre classe et inclut le nom de la classe comme propriétés. Dans LESS, vous pouvez déclarer mixin de la même manière que le style CSS en utilisant le sélecteur de classe ou d'id. Il peut stocker plusieurs valeurs et peut être réutilisé dans le code chaque fois que nécessaire.

Exemple

L'exemple suivant illustre l'utilisation de règles imbriquées dans le fichier LESS -

<html>
   <head>
      <title>Nested Rules</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
   </head>
   
   <body>
      <div class = "container">
         <h1>First Heading</h1>
         <p>LESS is a dynamic style sheet language that extends the capability of CSS.</p>
         <div class = "myclass">
            <h1>Second Heading</h1>
            <p>LESS enables customizable, manageable and reusable style sheet for web site.</p>
         </div>
      </div>
   </body>
</html>

Ensuite, créez le fichier style.less .

sans style

.container {
   h1 {
      font-size: 25px;
      color:#E45456;
   }
   p {
      font-size: 25px;
      color:#3C7949;
   }

   .myclass {
      h1 {
         font-size: 25px;
         color:#E45456;
      }
      p {
         font-size: 25px;
         color:#3C7949;
      }
   }
}

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

.container h1 {
   font-size: 25px;
   color: #E45456;
}

.container p {
   font-size: 25px;
   color: #3C7949;
}

.container .myclass h1 {
   font-size: 25px;
   color: #E45456;
}

.container .myclass p {
   font-size: 25px;
   color: #3C7949;
}

Production

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

  • Enregistrez le code html ci-dessus dans le nested_rules.html fichier.

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