1 00:00:00,500 --> 00:00:03,210 All right, make sure you launch the Workspace with this video to get 2 00:00:03,210 --> 00:00:05,600 all the latest files for this lesson. 3 00:00:05,600 --> 00:00:08,930 In the previous video, I asked you to practice creating partials 4 00:00:08,930 --> 00:00:13,480 by breaking mainstyles.scss out into related chunks of code. 5 00:00:13,480 --> 00:00:16,960 Well, in the latest Workspace, you'll see how I organized and 6 00:00:16,960 --> 00:00:22,060 sorted the partials into multiple directories for the base 7 00:00:22,060 --> 00:00:27,110 component and layout styles, as well as a directory for 8 00:00:27,110 --> 00:00:32,120 project utilities like variables, mixins, and proper placeholders. 9 00:00:32,120 --> 00:00:34,790 And over in style.sass, 10 00:00:34,790 --> 00:00:39,665 I imported each group of related partials using a separate import directive. 11 00:00:39,665 --> 00:00:42,860 Feel free to pause the video and have a closer look at the partial 12 00:00:42,860 --> 00:00:45,850 structure before moving on to media queries. 13 00:00:45,850 --> 00:00:49,670 Media queries are an important part of web design in front-end web development 14 00:00:49,670 --> 00:00:53,780 because they let you adapt the presentation of your content to a specific 15 00:00:53,780 --> 00:00:58,550 range of devices and screen sizes without having to change the content itself. 16 00:00:58,550 --> 00:01:04,490 Currently, our project uses media queries, just like you would with regular CSS. 17 00:01:04,490 --> 00:01:08,760 Now, one way developers managed media queries in Sass is by creating a partial 18 00:01:08,760 --> 00:01:11,840 in the layout directory for each media query break point. 19 00:01:11,840 --> 00:01:14,000 And one of the benefits of doing this is that you write and 20 00:01:14,000 --> 00:01:17,370 edit all your media query styles in one place. 21 00:01:17,370 --> 00:01:22,190 Well, when you write media queries this way, you're also repeating selectors 22 00:01:22,190 --> 00:01:25,950 by creating separate rules that refer to the same element. 23 00:01:25,950 --> 00:01:28,990 Well, Sass's job is to help you avoid repeating code, right? 24 00:01:28,990 --> 00:01:31,930 So, you can take advantage of features like nesting, 25 00:01:31,930 --> 00:01:36,150 variables and mixins to make media queries easier to work with. 26 00:01:36,150 --> 00:01:39,700 So instead of repeating selectors inside media query rules, 27 00:01:39,700 --> 00:01:43,530 you nest media queries directly inside the initial rule. 28 00:01:43,530 --> 00:01:44,280 And what this does is, 29 00:01:44,280 --> 00:01:47,940 it keeps media queries local to the original selector you're modifying. 30 00:01:47,940 --> 00:01:49,650 And it makes writing and maintaining them a breeze. 31 00:01:49,650 --> 00:01:56,680 So, for example, in our components images partial, there's a media query that hides 32 00:01:56,680 --> 00:02:02,520 the display of the featured image when a view port is 575 pixels or narrower. 33 00:02:02,520 --> 00:02:07,216 And in the layout containers partial, there's a media query that centers 34 00:02:07,216 --> 00:02:12,208 the main content container when the view port is 760 pixels or wider and below 35 00:02:12,208 --> 00:02:18,210 that, a media query that sets the intro divs width to 45 percent, at 992 pixels. 36 00:02:18,210 --> 00:02:21,160 So now, let's take full advantage of nesting 37 00:02:21,160 --> 00:02:23,940 to keep all related styles within the same selector. 38 00:02:23,940 --> 00:02:29,970 So first, go over to the components folder and open the file images.scss. 39 00:02:29,970 --> 00:02:34,926 Then nest the media query that sets the images display to none directly 40 00:02:34,926 --> 00:02:37,287 inside the image featured rule. 41 00:02:42,282 --> 00:02:47,665 Now remove the image featured selector and curly braces inside the media query, 42 00:02:47,665 --> 00:02:50,685 leaving the display none declaration only. 43 00:02:52,840 --> 00:02:55,255 Next, open the file containers. 44 00:02:55,255 --> 00:03:00,430 .scss inside the layout directory. 45 00:03:00,430 --> 00:03:04,290 Then, at the top of the file, I'll go ahead and cut and 46 00:03:04,290 --> 00:03:10,540 paste the media query that adjusts main-content's layout at 768 pixels, 47 00:03:10,540 --> 00:03:12,870 directly inside the main-content rule. 48 00:03:14,370 --> 00:03:18,366 Then once again delete the main content selector in curly braces inside 49 00:03:18,366 --> 00:03:19,370 the media query. 50 00:03:25,723 --> 00:03:29,559 And while we're working in this file, let's scroll down and 51 00:03:29,559 --> 00:03:32,449 nest the media query for the intro container. 52 00:03:45,082 --> 00:03:46,179 So, by nesting the media queries, 53 00:03:46,179 --> 00:03:47,945 we're doing all the styling within the same selectors. 54 00:03:47,945 --> 00:03:55,040 Some are just under a different context. 55 00:03:55,040 --> 00:03:58,160 So now, when you save and compile the latest changes, 56 00:03:58,160 --> 00:04:03,110 you'll see that Sass outputs each nested media query as a separate rule. 57 00:04:03,110 --> 00:04:05,826 So they get bubbled up to the root level of the style sheet, 58 00:04:05,826 --> 00:04:07,332 just like nested selectors do. 59 00:04:13,391 --> 00:04:16,775 Now, if your project requires lots of media queries, 60 00:04:16,775 --> 00:04:21,707 you can avoid repeating the same min width or max width values in your media query 61 00:04:21,707 --> 00:04:24,595 expressions by creating variables for them. 62 00:04:25,666 --> 00:04:31,280 So go ahead and open the variables partial inside the utilities folder, and 63 00:04:31,280 --> 00:04:35,280 at the bottom of the file, let's declare a variable for each break point value. 64 00:04:35,280 --> 00:04:39,580 So first, I'll write a comment for my break points, and 65 00:04:39,580 --> 00:04:45,990 we'll start with the variable break dash xs, for the extra-small break point. 66 00:04:45,990 --> 00:04:50,178 And we'll set the value to 575 pixels, right below, 67 00:04:50,178 --> 00:04:53,240 we'll create the variable break dash s. 68 00:04:54,460 --> 00:04:56,320 Set this value to 576 pixels. 69 00:04:56,320 --> 00:05:01,680 Then we'll create break dash M for medium break points. 70 00:05:01,680 --> 00:05:03,808 Set it to 768 pixels. 71 00:05:03,808 --> 00:05:07,178 And finally, 72 00:05:07,178 --> 00:05:12,150 break-l, which will be 992 pixels. 73 00:05:13,650 --> 00:05:16,470 So by storing the values in variables, 74 00:05:16,470 --> 00:05:20,250 we're able to configure all our media query break points in one place. 75 00:05:20,250 --> 00:05:23,850 Now, let's include a variable in place of the repeated value. 76 00:05:23,850 --> 00:05:27,336 So, we'll first replace the max-width value 77 00:05:27,336 --> 00:05:31,699 of the image-featured rule with the variable break-xs. 78 00:05:34,773 --> 00:05:36,500 Give that a save. 79 00:05:36,500 --> 00:05:42,250 And then, back in my containers partial, I'll scroll up and 80 00:05:42,250 --> 00:05:47,788 replace main content's break point value with break-m. 81 00:05:47,788 --> 00:05:53,899 Then, right below, we place the intro rules min width value of 992 pixels, 82 00:05:53,899 --> 00:05:56,195 with our break-l variable. 83 00:05:58,070 --> 00:05:59,990 All right, so let's give this a save. 84 00:05:59,990 --> 00:06:03,413 And have a look in the browser to make sure our layout still looks good. 85 00:06:07,942 --> 00:06:12,399 And it looks like our layout is still adjusting to all break points as expected, 86 00:06:12,399 --> 00:06:13,007 perfect. 87 00:06:18,542 --> 00:06:23,427 So next, why don't you try nesting the remaining media queries for card and 88 00:06:23,427 --> 00:06:27,103 header using the break point variables we just created? 89 00:06:27,103 --> 00:06:32,005 You can see how I added the media queries when you download the project files with 90 00:06:32,005 --> 00:06:32,823 this video. 91 00:06:32,823 --> 00:06:35,560 In a later video, I'll teach you a more advanced and 92 00:06:35,560 --> 00:06:38,561 efficient way to manage your media queries with mixins.