Вход

Полезные миксины для адаптива на SASS и LESS

Полезные миксины для адаптива на SASS и LESS

Данная статья посвящена тому как использовать препроцессоры css (на примере SASS и LESS) при написании медиазапросов.

Данный подход заключается в написании миксинов для необходимых брекпоинтов, после чего вся наша работа сводится к вызову необходимого миксина. Причём вызов миксина осуществляется в том же месте где и дефолтные стили, что существенно упрощает и минимизирует код

Далее приведём пример данного подхода на двух популярных препроцессорах

На языке LESS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
// mixin phones
.phones (@rules) {
  @media (min-width: 576px) {
    @rules();
  }
}
 
// вызов mixin
.phones (@rules) {
  @media (min-width: 576px) {
    @rules();
  }
}

На языке SASS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 
// mixins популярных брекпоинтов
@mixin desktop {
    @media screen and (max-width: 1200px) {
         @content;
    }
}
@mixin laptop {
    @media screen and (max-width: 992px) {
        @content;
    }
}
@mixin tablets {
    @media screen and (max-width: 768px) {
        @content;
    }
}
@mixin phones {
   @media screen and (max-width: 480px) {
        @content;
   }
}
 
 
// вызов mixin
footer {
  @include phones{ background-color: red;}
}

2 августа 2019 /

5274 Views /

0 Comment
Ilya Web developer
Author

«Всегда пишите код так, будто сопровождать его будет склонный к насилию психопат, который знает, где вы живете.»Martin Golding

Отправить ответ

Please Login to comment
  Получать уведомления о новых комментариях  
Уведомлять