MOINS - Scoping / Extension dans @media

La description

Dans la déclaration médiatique, extenddevrait être écrit. L'Extend correspond uniquement au sélecteur présent dans la même déclaration de média. La déclaration Extend present in media ne correspond pas au sélecteur présent dans la déclaration imbriquée.

Exemple

L'exemple suivant illustre l'utilisation de l'étendue de l'étendue à l'intérieur du média dans le fichier 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>

Ensuite, créez le fichier style.less .

sans style

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

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

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

Production

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

  • Enregistrez le code html ci-dessus dans le extend_syntax.htm fichier.

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