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
From the course: Responsive CSS Workflow with Sass, Bourbon, and Susy
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…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.