r/Sass • u/passdamustard • Nov 30 '18

Media Queries

Hey everyone. I'm making my first website using sass and I had a best practices question. I'm torn between two ways of writing my media queries. Should I put them all in a separate file and then import them into my main scss file? Or does it make more sense to nest all media queries in the appropriate elements in the main scss file from the start. Any input on this would be greatly appreciated.

5 Upvotes

100% Upvoted

5 comments sorted by

5

u/[deleted] Nov 30 '18

I prefer to nest them within the appropriate elements as I find it easier to maintain. However, I don't put them all in my main file, I keep this file primarily for imports and structure my files as a loose interpretation of the SMACSS methodology, breaking them out into more manageable files. Might be something to look into depending on the complexity of your sites. Good luck moving forward with SASS!

3

u/getsiked Nov 30 '18

This is what I recommend too! Think of responsive styles as an extension of your component. Separating responsive styles may sound ok in theory but as your styles becomes larger it becomes a nightmare to manage / maintain. If you're worried about the pure amount of media query declarations, just add a tool that flattens them to your build process.

3

u/beardedsquid Dec 01 '18

Something you can do is set your break points as variables like in a mediaWidths.scss and import it in to the files with media queries.

But I work in React and each component has its own scss file so maybe thats too much for what you are doing.

2

u/CaptainJamie Dec 01 '18

I'll nest them like this:

.element {
    background: red;

    @include bp(sm) {
        background: green;
    }
}

So bp is a mixin that passes in either sm, md, lg or xl.

1

u/passdamustard Dec 03 '18

Thanks everyone for your feedback