Media Queries em LESS

Vamos criar uma função que irá adicionar um media query ao elemento. Para o exemplo, vamos usar uma consulta que regula os estilos para dispositivos móveis. Vamos nomear nossa função consequentemente:

styles.less.mobile(@code) {

}

Nossa função receberá um bloco de código como parâmetro. Vamos inserir esse bloco dentro do media query:

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

Agora vamos usar nossa função:

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

Como resultado, após a compilação, nossa div estará dentro do media query, recebendo os estilos correspondentes:

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