LESS-те медиасұрабы

Элементке медиасұрабы қосатын функция жасайық. Мысал ретінде бұл ұялы телефондар үшін стильдерді реттейтін сұрап болсын. Функциямызды сәйкес атайық:

styles.less.mobile(@code) {

}

Біздің функция параметр ретінде код блогын қабылдайды. Бұл блокты медиасұрабы ішінде шығарайық:

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

Енді біздің функциямызды қолданайық:

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

Нәтижесінде компиляциядан кейін біздің див сәйкес стильдерді алып, медиасұрабы ішінде болады:

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