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

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

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

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

На языке LESS:

 
// mixin phones
.phones (@rules) {
  @media (min-width: 576px) {
    @rules();
  }
}
 
// вызов mixin
.phones (@rules) {
  @media (min-width: 576px) {
    @rules();
  }
}

На языке SASS:

 
// 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 /

15581 Views /

8 комментариев