Responsive SASS workflow [closed] - css

Question

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
I would like to know how you are handling Responsive design combined with SCSS in SASS. The main question is about media queries.
1) Are you writing media queries straight inside styled element using breakpoint mixin like this:
.element{
width:40%;
#media screen (min-width:700px){
width:100%;
}
#media screen (min-width:1000px){
width:50%;
}
}
// CSS
#media screen (min-width:700px){
.element{
width:100%;
}
}
#media screen (min-width:700px){
.element2{
width:50%;
}
}
2) Or are you writing them to special separate partial file? Like this for instance:
/* _responsive_wide_screen.scss */
#media screen (min-width:1000px){
.element{
width:50%;
display:inline-block;
}
.element2{
width:20%;
}
}
More faster to do is probably example number 1, but the problem is that the media query statement is generated for each element and the CSS file size is getting bigger and bigger. Should I avoid this approach?
I’m using example number 2 but sometimes is not so user friendly to switch between the files.
Thanks

Answer 1

My own preference is to use the first approach you showed. I like the benefits it provides in terms of localizing media queries to a specific element; I find it speeds up responsive workflow and encourages making adjustments where they are needed for the design/layout rather than just at specific breakpoints.
For large projects where it's worth the extra time, I then go through and consolidate media queries with identical min-width and max-width values. Having to do this secondary optimization is certainly a drawback of this approach -- I am hopeful that an upcoming release of Sass will automate this feature for us.