Nesting Media Queries

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