MENOS - Directivas anidadas y burbujeo

Descripción

Puede anidar las directivas, como medios y fotogramas clave, de la misma manera, de la misma forma que anida los selectores. Puede colocar la directiva en la parte superior y sus elementos relativos no se cambiarán dentro de su conjunto de reglas. Esto se conoce como proceso de burbujeo.

Ejemplo

El siguiente ejemplo demuestra el uso de las directivas anidadas y el burbujeo en el archivo 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>

A continuación, cree el archivo style.less .

estilo sin

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

Puede compilar el archivo style.less en style.css usando el siguiente comando:

lessc style.less style.css

Ejecute el comando anterior; creará el archivo style.css automáticamente con el siguiente código:

style.css

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

Salida

Siga estos pasos para ver cómo funciona el código anterior:

  • Guarde el código html anterior en el nested_directives_bubbling.html archivo.

  • Abra este archivo HTML en un navegador, se mostrará el siguiente resultado.