MENO - Scoping / Estendi all'interno di @media

Descrizione

All'interno della dichiarazione dei media, extenddovrebbe essere scritto. Extend corrisponde solo al selettore che è presente all'interno della stessa dichiarazione multimediale. L'Extend presente nella dichiarazione media non corrisponde al selettore presente all'interno della dichiarazione nidificata.

Esempio

L'esempio seguente dimostra l'uso dell'estensione dell'ambito all'interno del supporto nel file LESS:

extended_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>

Quindi, crea il file style.less .

style.less

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

È possibile compilare il file style.less in style.css utilizzando il seguente comando:

lessc style.less style.css

Esegui il comando precedente; creerà automaticamente il file style.css con il seguente codice -

style.css

@media screen {
   .style,
   .cont {
      width: 500px;
   }
}

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

Produzione

Segui questi passaggi per vedere come funziona il codice sopra:

  • Salva il codice html sopra nel file extend_syntax.htm file.

  • Apri questo file HTML in un browser, verrà visualizzato il seguente output.