Load order of Sass media queries as partials

Question

This is more of a best practice question.

I am working on a Bootstrap and Sass based website, I am importing partials in the beginning in the "main.scss" file, however for the media queries this means I have to re-write code for some breakpoints since media queries are loaded first and then the rest of the page styles. For e.g.:

// _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;
}

My scss imports:

// Imports

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

// Rest of the page styles

Is it a good idea/best practice to load the media queries at the end? In a single Sass file I would do that, but I would like to know how to get around this dealing with partials.

Answer 1

I usually setup my 'partials' based on components. I don't need a separate file with media queries and just keep them within the same component. Let's say I'd have a nav component, my sass would look something like:

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

I believe this allows for more readability and easier maintenance/scaling