Media vaicājumi LESS

Izveidosim funkciju, kas pievienos elementam media vaicājumu. Piemēram, lai tas būtu vaicājums, kas regulē stilus mobilajām ierīcēm. Nosauksim mūsu funkciju atbilstoši:

styles.less.mobile(@code) {

}

Mūsu funkcija kā parametru saņems koda bloku. Izvadīsim šo bloku media vaicājuma iekšienē:

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

Tagad izmantosim mūsu funkciju:

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

Rezultātā pēc kompilācijas mūsu div elements nonāks media vaicājuma iekšienē, saņemot atbilstošos stilus:

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