MOINS - Directives imbriquées et bulles

La description

Vous pouvez imbriquer les directives telles que les médias et les images clés de la même manière, comme vous imbriquez les sélecteurs. Vous pouvez placer la directive au-dessus et ses éléments relatifs ne seront pas modifiés dans son ensemble de règles. C'est ce qu'on appelle le processus de bouillonnement.

Exemple

L'exemple suivant illustre l'utilisation des directives imbriquées et le bullage dans le fichier LESS -

<html>
   <head>
      <title>Nested Directives</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
   </head>
   
   <body>
      <h1>Example using Nested Directives</h1>
      <p class = "myclass">LESS enables customizable, 
      manageable and reusable style sheet for web site.</p>
   </body>
</html>

Ensuite, créez le fichier style.less .

sans style

.myclass {
   @media screen {
      color: blue;
      @media (min-width: 1024px) {
         color: green;
      }
   }
   @media mytext {
      color: black;
   }
}

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

@media screen {
   .myclass {
      color: blue;
   }
}
@media screen and (min-width: 1024px) {
   .myclass {
      color: green;
   }
}
@media mytext {
   .myclass {
      color: black;
   }
}

Production

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

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

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