Nesting Media Queries6:38 with Guil Hernandez
Sass lets you nest media queries directly inside the initial rules you're modifying. This keeps media queries local to the original selector, and makes writing and maintaining them easy.
All right, make sure you launch the Workspace with this video to get 0:00 all the latest files for this lesson. 0:03 In the previous video, I asked you to practice creating partials 0:05 by breaking mainstyles.scss out into related chunks of code. 0:08 Well, in the latest Workspace, you'll see how I organized and 0:13 sorted the partials into multiple directories for the base 0:16 component and layout styles, as well as a directory for 0:22 project utilities like variables, mixins, and proper placeholders. 0:27 And over in style.sass, 0:32 I imported each group of related partials using a separate import directive. 0:34 Feel free to pause the video and have a closer look at the partial 0:39 structure before moving on to media queries. 0:42 Media queries are an important part of web design in front-end web development 0:45 because they let you adapt the presentation of your content to a specific 0:49 range of devices and screen sizes without having to change the content itself. 0:53 Currently, our project uses media queries, just like you would with regular CSS. 0:58 Now, one way developers managed media queries in Sass is by creating a partial 1:04 in the layout directory for each media query break point. 1:08 And one of the benefits of doing this is that you write and 1:11 edit all your media query styles in one place. 1:14 Well, when you write media queries this way, you're also repeating selectors 1:17 by creating separate rules that refer to the same element. 1:22 Well, Sass's job is to help you avoid repeating code, right? 1:25 So, you can take advantage of features like nesting, 1:28 variables and mixins to make media queries easier to work with. 1:31 So instead of repeating selectors inside media query rules, 1:36 you nest media queries directly inside the initial rule. 1:39 And what this does is, 1:43 it keeps media queries local to the original selector you're modifying. 1:44 And it makes writing and maintaining them a breeze. 1:47 So, for example, in our components images partial, there's a media query that hides 1:49 the display of the featured image when a view port is 575 pixels or narrower. 1:56 And in the layout containers partial, there's a media query that centers 2:02 the main content container when the view port is 760 pixels or wider and below 2:07 that, a media query that sets the intro divs width to 45 percent, at 992 pixels. 2:12 So now, let's take full advantage of nesting 2:18 to keep all related styles within the same selector. 2:21 So first, go over to the components folder and open the file images.scss. 2:23 Then nest the media query that sets the images display to none directly 2:29 inside the image featured rule. 2:34 Now remove the image featured selector and curly braces inside the media query, 2:42 leaving the display none declaration only. 2:47 Next, open the file containers. 2:52 .scss inside the layout directory. 2:55 Then, at the top of the file, I'll go ahead and cut and 3:00 paste the media query that adjusts main-content's layout at 768 pixels, 3:04 directly inside the main-content rule. 3:10 Then once again delete the main content selector in curly braces inside 3:14 the media query. 3:18 And while we're working in this file, let's scroll down and 3:25 nest the media query for the intro container. 3:29 So, by nesting the media queries, 3:45 we're doing all the styling within the same selectors. 3:46 Some are just under a different context. 3:47 So now, when you save and compile the latest changes, 3:55 you'll see that Sass outputs each nested media query as a separate rule. 3:58 So they get bubbled up to the root level of the style sheet, 4:03 just like nested selectors do. 4:05 Now, if your project requires lots of media queries, 4:13 you can avoid repeating the same min width or max width values in your media query 4:16 expressions by creating variables for them. 4:21 So go ahead and open the variables partial inside the utilities folder, and 4:25 at the bottom of the file, let's declare a variable for each break point value. 4:31 So first, I'll write a comment for my break points, and 4:35 we'll start with the variable break dash xs, for the extra-small break point. 4:39 And we'll set the value to 575 pixels, right below, 4:45 we'll create the variable break dash s. 4:50 Set this value to 576 pixels. 4:54 Then we'll create break dash M for medium break points. 4:56 Set it to 768 pixels. 5:01 And finally, 5:03 break-l, which will be 992 pixels. 5:07 So by storing the values in variables, 5:13 we're able to configure all our media query break points in one place. 5:16 Now, let's include a variable in place of the repeated value. 5:20 So, we'll first replace the max-width value 5:23 of the image-featured rule with the variable break-xs. 5:27 Give that a save. 5:34 And then, back in my containers partial, I'll scroll up and 5:36 replace main content's break point value with break-m. 5:42 Then, right below, we place the intro rules min width value of 992 pixels, 5:47 with our break-l variable. 5:53 All right, so let's give this a save. 5:58 And have a look in the browser to make sure our layout still looks good. 5:59 And it looks like our layout is still adjusting to all break points as expected, 6:07 perfect. 6:12 So next, why don't you try nesting the remaining media queries for card and 6:18 header using the break point variables we just created? 6:23 You can see how I added the media queries when you download the project files with 6:27 this video. 6:32 In a later video, I'll teach you a more advanced and 6:32 efficient way to manage your media queries with mixins. 6:35
You need to sign up for Treehouse in order to download course files.Sign up