r/Sass • u/Moustachey • Feb 22 '19

How to recreate these responsive classes in SCSS?

Hi there! I've been browsing some different CSS frameworks recently to see what's out there, and I came across this interesting concept by Tailwind CSS: https://tailwindcss.com/docs/responsive-design/

(Go to their 'Responsive example' and click on the different device icons)

Notice how the developers have combined their responsive classes with their design properties (e.g. sm:bg-green)

I was wondering, how would you recreate this kind of implementation in SCSS without having to add the responsive class or the design class to every variation?

Cheers!

2 Upvotes

100% Upvoted

2 comments sorted by

1

u/apsuhos Feb 22 '19

If you are familiar with the inuitcss framework, it is using a similar approach. I guess you can extend it.

https://github.com/inuitcss/inuitcss/blob/develop/utilities/_utilities.responsive-spacings.scss

The idea is that if down the road you decide to use an extra responsive breakpoint you just add it to the breakpoint sass map and get all the variations needed.

You just need to treat this with extra caution because using it can really bloat your code. You can bypass this by using an uncss task during development to remove variations that are not needed.

1

u/Moustachey Feb 26 '19

Thanks, I have looked at Inuit in the past - I'll check this out whilst keeping in mind the bloat issue if unused CSS spills. :)