Defining Media Queries8:13 with Guil Hernandez
There are many benefits to using Sass when building or refactoring responsive layouts. In this video, we'll cover some the ways we can refactor our project's media queries.
There's lots of benefits to using Sass when building or 0:00 refactoring responsive layout. 0:02 Mainly, because of how we are able to define media queries. 0:04 For instance, we have the handy option of nesting them, 0:07 inside rules, which keeps media queries local to their component. 0:10 So let's go over some of the ways we can refactor our project's media queries. 0:14 So one of the ways we can define media queries with Sass, 0:19 is creating a layout partial for each media query. 0:23 And defining them inside their respective partial files. 0:27 Now one of the benefits of doing that is that we're able to see the entire set of 0:30 media queries at once. 0:34 But I prefer to nest media queries inside rule. 0:36 Because this keeps our media queries local to the component and 0:39 the original styles we're modifying. 0:43 And what's great is that Sass will output each nested media query 0:45 as a separate rule when the stylesheet is compiled. 0:49 Since media queries tend to get duplicated a lot in projects, 0:53 instead of hard coding the media query breakpoints every time we write a media 0:57 query, it's usually best to create variables or mixins for them. 1:01 So, for our project, we're going to define a couple 1:05 of breakpoint variables to make things more maintainable. 1:08 So, back in our styles.scss partial, 1:11 the only remaining rules we have in here are our media queries. 1:15 So, we'll need to sort of distribute these to their respective rules. 1:18 Now, currently, we're using two breakpoints in our project. 1:23 One of these adjust the layout in the narrow viewport sizes. 1:27 While the other adjusts parts of the design in wider viewport sizes. 1:31 And as we can see, the breakpoints are at a max width of 1024 pixels, 1:36 and a max width of 768 pixels. 1:41 So let's go back to our variables partial, inside the base folder. 1:45 And declare variables for those breakpoints. 1:50 So we'll scroll all the way down. 1:53 And right beneath the asset path variable, 1:55 let's add another comment that tells us these are our media query breakpoint. 1:59 So we'll say media query breakpoints. 2:03 [SOUND] And now we're going to create our two breakpoint variables. 2:07 So first, let's create the variable for the more narrow breakpoint. 2:11 So let's call that break narrow, and right below that, 2:16 let's create one for the wide breakpoint, so 2:21 we'll call this one break dash wide. 2:26 [SOUND] So now as the values for these variables, 2:30 we'll add their respective media query expressions in between quotes. 2:33 So first, for break narrow, let's go ahead and 2:38 add the expression max [SOUND] width [SOUND] 768 pixels. 2:44 [SOUND] And right below that, for break wide, 2:50 we'll write the expression max width [SOUND] 1024 pixels. 2:54 [SOUND] Okay. 3:00 So now let's begin defining some of the media query adjustments in our project. 3:03 So for instance, let's first go inside our components directory. 3:08 And open up our icons partial. 3:13 And let's have a media query for our arrow rule. 3:16 So if we go back to our style.scss partial, we can see that the arrow 3:20 adjustments here are in the max width 768 media query. 3:26 So I'm actually going to cut the display: none; declaration 3:31 out of this media query and I'll just delete the rule there altogether. 3:38 And I'll go back inside the icons partial and 3:42 define our media query inside this arrow rule. 3:45 So let's say at media, and once again, 3:49 to pass the breakpoint variables, we'll need to use interpolation syntax. 3:52 So I'll to hash, curly braces, then inside we're going to pass the break 3:57 narrow variable for our narrow breakpoint. 4:03 [SOUND] So inside the media query rule, 4:06 I'm gonna paste in that display none declaration. 4:09 Then I'll go ahead and save and preview the project and let's see what happens. 4:13 Let's see if this worked. 4:18 So, I'm gonna start resizing the browser and 4:19 sure enough, our icon image is displayed to none in the narrow viewport sizes. 4:22 So great. 4:27 Our media query is working just fine. 4:28 So let's do some more. 4:30 Let's close out our icons.scss partial and 4:31 let's now go over to our typography partial. 4:35 And let's define some media queries in here. 4:39 So first, let's add one inside our main heading rule. 4:41 So at the very bottom, we're going to say at media hash, curly brackets. 4:45 [SOUND] And once again, our media query breakpoint variable will be break narrow. 4:51 [SOUND] So let's go back to our style.scss partial. 4:56 And we're going to cut out the declarations in the main heading rule. 5:04 So now I'm just gonna delete that. 5:10 And back in our typography partial, 5:13 I'll just paste those inside the nested media query. 5:15 [SOUND] All right, so let's save. 5:18 I'll refresh, and take a look real quick. 5:22 And it looks like, that looks good. 5:26 Our main heading adjusts accordingly. 5:29 [SOUND] And right below in our title rule, let's add a media query here, 5:30 so at the bottom, we'll say, at media and once again, 5:35 we're going to pass the break narrow variable. 5:39 [BLANK_AUDIO] 5:43 And once again, we'll go back to our style partial and 5:49 let's cut out the media query rules under main title, 5:53 [SOUND] and paste them inside our new media query. 5:57 [SOUND] I'll save, 6:01 refresh. 6:06 And, yep, that looks good. 6:09 And I'll go ahead and do one more before I leave you on your own to do the rest. 6:12 So let's go ahead and do the one for our intro paragraph. 6:16 So, right below the include declaration, we'll say, 6:20 at media, and we'll once again pass that break narrow variable. 6:24 [SOUND] So, back in our style.scss partial, 6:29 let's copy the font size here for intro. 6:37 Paste it inside our new media query rule. 6:44 Then I'll go ahead and 6:49 take a look in the browser just to see if it's working and yep, it's looking good. 6:50 And now we're all set with our typography media queries. 6:56 Now I'm not gonna write all the media queries in our project here, 7:00 because that will take up a lot of time. 7:02 So, go ahead and add the rest of them on your own, and then you can go ahead and 7:04 delete the style.scss partial when you're all done. 7:09 Finally, there's kind of a misconception that 7:15 nested media queries are a maintainability nightmare. 7:17 And they can cause bloat in the output. 7:21 Well that just depends on the scale of your project, but 7:24 even then, the extra media query rules and 7:27 the output do not bloat the file size in any significant way. 7:30 And as with most things in web development, 7:34 there's really no silver bullet method here. 7:37 So finds what's best for the conditions of your project and stick with that. 7:40 We can also build powerful conditional media query nixins using Sass's if and 7:44 else directives. 7:49 So in the teacher's notes, I've posted a link to the section in our Modular CSS 7:50 with Sass course where you can learn how to build them. 7:55 So that's it. 7:59 Our CSS refactoring is complete. 8:00 That wasn't so bad after all, was it? 8:01 Coming up next, we'll take a look at how to get around some of the errors and 8:04 issues we may encounter when working with Sass, 8:07 then get our CSS optimized for production. 8:10
You need to sign up for Treehouse in order to download course files.Sign up