MENOS - Alcance / Extender dentro de @media

Descripción

Dentro de la declaración a los medios, extenddebe escribirse. Extend coincide con el selector solo que están presentes dentro de la misma declaración de medios. La declaración Extend present in media no coincide con el selector presente dentro de la declaración anidada.

Ejemplo

El siguiente ejemplo demuestra el uso de la extensión del alcance dentro de los medios en el archivo LESS:

extend_syntax.htm

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

   <body>
      <h2>Example using extend inside media</h2>
      <img src="/less/images/less-extend/nature.jpg" class = "style">
   </body>
</html>

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

estilo sin

@media screen {
   .style {
      width:500px;
   }
   @media (min-width: 1023px) {
      .style {
         width:500px;
      }
   }
}
.cont:extend(.style) {}

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 {
   .style,
   .cont {
      width: 500px;
   }
}

@media screen and (min-width: 1023px) {
   .style,
   .cont {
      width: 500px;
   }
}

Salida

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

Guarde el código html anterior en el extend_syntax.htm archivo.
Abra este archivo HTML en un navegador, se mostrará el siguiente resultado.

↰ Previous page