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;
  }
}
Задание 1

Планшеттер үчүн стилдерди белгилөөчү tablet функциясын жасаңыз.

Задание 2

Мобилдик телефондор жана планшеттер үчүн стилдерди белгилөөчү gadget функциясын жасаңыз.

Задание 3

Ноутбуктар үчүн стилдерди белгилөөчү notebook функциясын жасаңыз.

Задание 4

Десктоптор үчүн стилдерди белгилөөчү desktop функциясын жасаңыз.