Drop-In Responsive Styles with Sass
Organizing responsive styles into your existing stylesheet is always a challenge, but a simple Sass mixin can provide you with a dead-simple way to inject responsiveness wherever it's needed.
Here's the scenario. You've got most of your responsive styles specified within @media calls, but sometimes, even nesting responsive styles feels like overkill. When only one or two items are changed responsively, lines of code can add up quickly. For example, say I have an element with a bunch of styles that only needs margin and font size to change at 800px or smaller:
.my_cool_element
font-size: 24px
margin-bottom: 40px
// a ton of other stuff here
@media screen and (max-width: 800px)
font-size: 18px
margin-bottom: 20pxThere's a simple readability issue here: there might be a lot of lines of code in between the original and the responsive styles. Plus, if I want new styles at a second breakpoint (e.g. 480px for mobile), I'll need to list each attribute a third time under a new @media call.
This got me thinking. Given that I was finding myself using at most two breakpoints (roughly tablet-sized and roughly mobile-sized), and very often was only changing a few attributes per selector, was there a way to knock out all possible attribute values on one line?
Enter the responsive mixin.
= responsive($attr, $full, $mid:false, $narrow:false)
#{$attr}: #{$full}
@if $mid
@media screen and (max-width: 800px)
#{$attr}: #{$mid}
@if $narrow
@media screen and (max-width: 480px)
#{$attr}: #{$narrow}Here's the magic: with this mixin, I can specify all of my breakpoint values in one place. I just pass the attribute to responsive, along with each breakpoint's value.
.my_cool_element
+responsive(font-size, 24px, 20px)
+responsive(margin-bottom, 40px, 20px)
font-size: 24px
margin-bottom: 40pxSo if I need to add more attributes at the 480px breakpoint, I can just pass a third value to the appropriate +responsive call:
.my_cool_element
+responsive(font-size, 24px, 20px, 16px)
+responsive(margin-bottom, 40px, 20px, 10px)
font-size: 24px
margin-bottom: 40pxI've found this technique to be tremendously useful for sprinkling my stylesheet with responsiveness. (I also recommend abstracting your breakpoint sizes into Sass variables, but that's outside the scope of this post.) Obviously you'll encounter scenarios in which you're changing 5 or 6 attributes, at which point that element will have outgrown this technique – but once I started approaching responsiveness with this mixin, I found it was cutting down on lots of verbose @media nesting.
So, give +responsive a shot! Maybe it'll make your life easier.
(originally posted on the Hashrocket blog)
Written by Cameron Daigle
Related protips
10 Responses
Did you check your compiled css file? I haven't checked, but I could imagine, that this creates tons of @media queries with nested classes. Or is SASS clever enough to merge them into one?
@namxam, no.
Sass:
= responsive($attr, $full, $mid:false, $narrow:false)
#{$attr}: #{$full}
@if $mid
@media screen and (max-width: 800px)
#{$attr}: #{$mid}
@if $narrow
@media screen and (max-width: 480px)
#{$attr}: #{$narrow}
.my_cool_element
+responsive(font-size, 24px, 20px)
+responsive(margin-bottom, 40px, 20px)
font-size: 24px
margin-bottom: 40px
.my_cool_element2
+responsive(font-size, 24px, 20px, 16px)
+responsive(margin-bottom, 40px, 20px, 10px)
font-size: 24px
margin-bottom: 40pxCSS:
.my_cool_element {
font-size: 24px;
margin-bottom: 40px;
font-size: 24px;
margin-bottom: 40px;
}
@media screen and (max-width: 800px) {
.my_cool_element {
font-size: 20px;
}
}
@media screen and (max-width: 800px) {
.my_cool_element {
margin-bottom: 20px;
}
}
.my_cool_element2 {
font-size: 24px;
margin-bottom: 40px;
font-size: 24px;
margin-bottom: 40px;
}
@media screen and (max-width: 800px) {
.my_cool_element2 {
font-size: 20px;
}
}
@media screen and (max-width: 480px) {
.my_cool_element2 {
font-size: 16px;
}
}
@media screen and (max-width: 800px) {
.my_cool_element2 {
margin-bottom: 20px;
}
}
@media screen and (max-width: 480px) {
.my_cool_element2 {
margin-bottom: 10px;
}
}
@namxam it doesn't, but file size is an optimization issue for minification/gzip (heck, while I don't recommend it, plenty of people START with Bootstrap, which is 100+ KB out of the box), and selector speed is really not a concern on modern devices. There are plenty of other places in an app to optimize performance other than generated CSS :)
Yes, and I am not concerned about file size. I was just curious how SASS compiles such an approach. I think you are right, that this might be easier to read. But at the same time, it can increase the number of selectors significantly.
Totally, agreed – it's no replacement for larger @media blocks, it's just for piecemeal stuff.
I've got a Compass plugin that sits about halfway between bare metal and your approach:
https://github.com/mikesten/compass-respond
It's a little more verbose but I find it to be very readable... Not every element needs to respond to every breakpoint so I can just pick and choose as needed.
@mikesten yeah, we have similar shortcut mixins for regular @media queries where you're modifying a bunch of attributes rather than just one or two.
there is always this if you are worried about too many media queries: https://github.com/aaronjensen/sass-media_query_combiner
That said, performance and size wise there is little to no difference.
Great!
I've made something similar some time ago to use with Foundation 5. https://gist.github.com/jofralogo/8067716
:)
Very cool. As @aaronjensen alludes to, there exist post processors that afford automated media query packing. Pleeease is another option.
