Meediapäringud LESS-is

Teeme funktsiooni, mis lisab elemendile meediapäringu. Olgu näiteks see päring, mis reguleerib mobiilseadmete stiile. Nimetame oma funktsiooni vastavalt:

styles.less.mobile(@code) {

}

Meie funktsioon võtab parameetrina koodibloki. Väljastame selle bloki meediapäringu sees:

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

Nüüd kasutame oma funktsiooni:

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

Tulemusena pärast kompileerimist sattub meie div meediapäringu sisse, saades vastavad stiilid:

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