Hi SCSS Peeps! I'm trying to get in the habit of writing better cleaner SCSS, and I need some feedback.
Given the following (simplified) mix-in to generate media queries in SCSS:
@mixin breakpoint($point) {
@if $point==desktop {
@media (min-width: 70em) {
@content ;
}
}
}
Example A
Do you nest a Parent and Child selector like this:
.parent {
// Parent Mobile Styles
.child {
// Child Mobile Styles
}
@include breakpoint(desktop) {
// Parent Desktop Stlyes
.child {
// Child Desktop Styles
}
}
}
Example B
or like this:
.parent {
// Parent Mobile Styles
@include breakpoint(desktop) {
// Parent Desktop Styles
}
.child {
// Child Mobile Styles
@include breakpoint(desktop) {
// Parent Desktop Styles
}
}
}
Or something totally different? One of my problems is I need to pick one way to handle media queries and stick with it. Any suggestions?
Top comments (4)
This seems more like a bigger philosophical question on whether you want to be writing mobile-first (min-width) styles or desktop-first (max-width) styles. There probably is no right or wrong answer to that, other than that people sometimes treat mobile/small screen as an afterthought and forcing yourself to think about that styling first can be beneficial.
Sass is maybe just an implementation detail regarding that.
What I thought of when I saw the Sass nature of this post was HOW/WHERE you nest those media queries. I sometimes struggle with when to split it up and when the combine. Like...
Versus
First off, THE Chris Coyier?! I'm humbled. Your examples definitely better explains what I was trying to ask. I definitely subscribe to mobile first, although I do struggle with actually doing mobile "first" design.
As I'm thinking about it, it makes more modular sense to have the breakpoints inside the individual components instead of grouping components inside an individual breakpoint.
I'd prefer to take advantage of scss nesting.
Example A, if written in plain
csswould look like thisThe advantage
scsshas over css is, you can compose nested styles without having to write theparentclass selector (or the same class selector) multiple times (concise and readable code). In that context, Example B is a better way to write as your code as you write your class selector only once and all the relevant style definitions are composed into it at one place (styles and breakpoint specific styles).Example B
That's definitely what I'm learning toward, the more that I'm thinking about it. Each component gets it's own breakpoint specific style, instead of grouping a bunch of components to one breakpoint.