Média dopytov v LESS

Vytvorme funkciu, ktorá bude pridávať k elementu médiadopyt. Nech pre príklad to bude dopyt, ktorý reguluje štýly pre mobilné zariadenia. Pomenujme našu funkciu príslušne:

styles.less.mobile(@code) {

}

Naša funkcia bude parametrom prijímať blok kódu. Vypíšme tento blok vnútri médiadopytu:

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

Teraz použijme našu funkciu:

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

V dôsledku po kompilácii sa náš div ocitne vnútri médiadopytu, pričom získa príslušné štýly:

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