Media queries en LESS

Créons une fonction qui ajoutera un media query à un élément. Prenons par exemple une requête qui régule les styles pour les appareils mobiles. Nommons notre fonction en conséquence :

styles.less.mobile(@code) {

}

Notre fonction prendra en paramètre un bloc de code. Affichons ce bloc à l'intérieur du media query :

styles.less.mobile(@code) {
  @media (max-width: 600px) {
    @code();
  }
}

Maintenant, utilisons notre fonction :

styles.lessdiv {
  .mobile({
    width: 300px;
  });
}

En conséquence, après la compilation, notre div se trouvera à l'intérieur du media query, obtenant les styles correspondants :

styles.less@media (max-width: 600px) {
  div {
    width: 300px;
  }
}