Порядок загрузки медиазапросов Sass как частичных

Question

Это больше вопрос лучшей практики.

Я работаю над сайтами на основе Bootstrap и Sass, вначале я импортирую партиалы в файл "main.scss", однако для медиазапросов это означает, что мне нужно переписать код для некоторых точек останова, так как медиазапросы загружаются первыми а затем остальные стили страницы. Например:

// _media_queries.scss (loaded first)

@media(max-width:767px) {
   .vertical_switch{
       width:100%;
       padding: 0;
   }
}

// main.scss (loaded second - overrides mobile breakpoint)
.vertical_switch{
   width: 50%;
   padding: 20px 0;
}

Мой scss импортирует:

// Imports

@import '_mixins';
@import '_preloader';
@import '_media_queries';

// Rest of the page styles

Это хорошая идея / лучшая практика для загрузки медиа-запросов в конце? Я бы сделал это в одном файле Sass, но я хотел бы знать, как обойти это, имея дело с частичными функциями.

Answer 1

Я обычно настраиваю свои "частичные функции" на основе компонентов. Мне не нужен отдельный файл с медиа-запросами, я просто храню их в одном компоненте. Допустим, у меня будет компонент nav, мой sass будет выглядеть примерно так:

.nav {
    width:100%;
    padding: 0;
    @media(min-width:767px) {
         width: 50%;
         padding: 20px 0;
    }
 }

Я считаю, что это обеспечивает большую читабельность и облегчает обслуживание / масштабирование