From the course: Responsive CSS Workflow with Sass, Bourbon, and Susy

Unlock the full course today

Join today to access over 22,400 courses taught by industry experts or purchase this course individually.

Using media query breakpoints

Using media query breakpoints

From the course: Responsive CSS Workflow with Sass, Bourbon, and Susy

Start my 1-month free trial

Using media query breakpoints

- [Instructor] A mobile first approach to styling means that styles are applied first to devices with small view ports. Advanced styles and other overrides for larger screens are then added into the style sheet via media queries. And this is an approach that uses the min-width media query. So Susy has built in media query handling using this Susy Breakpoint mixin, and that's what we're going to use in our sample project. So this mixin takes three parameters. Only one is actually required, and that's the first one, query, but query is going to define at what screen size we want a breakpoint to be. Layout is going to be the SAS map that we're using, and in this case, we're just using that default, Susy, that we declared earlier, and I'll show you that in a second. And lastly, there's no-query, which is just going to be a fallback. So let's go over to our code editor, and the first thing I want to do here is open up my variables partial. And let's go ahead and create some variables for…

Contents