Медија-записи во LESS

Ајде да направиме функција која ќе додава на елементот медија-запис. Нека за пример ова биде запис кој ги регулира стиловите за мобилни уреди. Да ја именуваме нашата функција соодветно:

styles.less.mobile(@code) {

}

Нашата функција како параметар ќе прифаќа блок на код. Ајде да го испечатиме овој блок внатре во медија-записот:

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

Сега да ја искористиме нашата функција:

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

Како резултат, по компајлирање, нашиот div ќе се најде внатре во медија-записот, добивајќи ги соодветните стилови:

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