Responsive Design w/ SCSS

Hey campers!

Does anyone know of any free resources in which I can learn how to create fluid, responsive layouts with SCSS? For example, I am talking about using @mixins and @functions to create media queries that utilize if and else statements for different breakpoints or to convert px to em for typography.

Thanks!

do your own in code pen

Hi Shaux, hoping to chip if anything might be of help

For fluid responsive layout, try out Bootstrap as your base library. Then test the mixins and media queries from there.

I tend to recommend W3Schools for quick test of a certain functionality of a language one wants to learn. It gives you a basic run-though of syntaxes in multiple languages. For SASS, see

https://www.w3schools.com/sass/

You may further explore in-depth with other resources too, there’s media queries examples in there:


Hope it helps one way or another.

2 Likes