1 00:00:00,000 --> 00:00:04,803 [MUSIC] 2 00:00:04,803 --> 00:00:06,073 Earlier you set up Sass and 3 00:00:06,073 --> 00:00:10,250 got started using variables to avoid repeating values in multiple places. 4 00:00:10,250 --> 00:00:14,170 In stage, you'll learn to integrate the stylish time saving features of Sass into 5 00:00:14,170 --> 00:00:15,290 your daily work flow and 6 00:00:15,290 --> 00:00:19,219 you'll quickly experience why Sass is one of the standard ways for writing CSS. 7 00:00:20,300 --> 00:00:22,970 First, I'll teach you how Sass makes writing descendent and 8 00:00:22,970 --> 00:00:25,520 complex selectors fast and simple. 9 00:00:25,520 --> 00:00:27,930 You've probably created descendent, sibling, 10 00:00:27,930 --> 00:00:30,860 or direct child selectors like this at some point. 11 00:00:30,860 --> 00:00:33,390 These selectors are a great way to create styles that 12 00:00:33,390 --> 00:00:35,830 target very specific elements on a page. 13 00:00:35,830 --> 00:00:38,960 But they can require a lot of typing as you specify selectors that 14 00:00:38,960 --> 00:00:41,380 map to the structure of your HTML. 15 00:00:41,380 --> 00:00:46,070 What Sass provides a helpful solution to all of these typing with nested selectors. 16 00:00:46,070 --> 00:00:49,650 Nesting also helps you write selectors in a less repetitive and organized way. 17 00:00:51,210 --> 00:00:52,260 In the next few videos, 18 00:00:52,260 --> 00:00:56,000 I'll be displaying the SCSS and output CSS files side by side. 19 00:00:56,000 --> 00:01:00,760 So that we're able to see how Sass compiles SCSS syntax into plain CSS. 20 00:01:00,760 --> 00:01:03,917 Be sure to launch the work space with this video or 21 00:01:03,917 --> 00:01:08,691 download the project files to get all the latest files and in the console or 22 00:01:08,691 --> 00:01:12,014 on sass --watch scss:css to start the watcher. 23 00:01:14,710 --> 00:01:19,551 You're composing nester selector in Sass by creating a rule inside another rule 24 00:01:19,551 --> 00:01:22,640 similar to the way tags are nested in HTML. 25 00:01:22,640 --> 00:01:26,120 A good use for selector nesting is when styling a navigation. 26 00:01:26,120 --> 00:01:30,360 For example, let's create a nested rule that styles the list items 27 00:01:30,360 --> 00:01:33,940 inside this UL with a class main-nav. 28 00:01:33,940 --> 00:01:39,010 We'll scroll down to the component section of the style sheet and 29 00:01:39,010 --> 00:01:43,900 instead of typing a descendant selector like main-nav 30 00:01:43,900 --> 00:01:49,230 li in a separate rule or creating an li rule that would target 31 00:01:49,230 --> 00:01:53,690 every list item on the page, we'll create it right will then the amin nav rule. 32 00:01:56,060 --> 00:02:02,369 So right below the margin top declaration, 33 00:02:02,369 --> 00:02:05,779 let's nest an li rule, 34 00:02:05,779 --> 00:02:10,894 we'll set this li display to inline 35 00:02:10,894 --> 00:02:15,852 block in the margin to 0.65 m. 36 00:02:15,852 --> 00:02:20,440 This scopes the li rule to the main nav have selector. 37 00:02:20,440 --> 00:02:21,620 When used properly, 38 00:02:21,620 --> 00:02:24,970 nesting can be parts of your style sheet easier to write and maintain. 39 00:02:24,970 --> 00:02:28,350 For instance, by just looking at the hierarchy of this rule, 40 00:02:28,350 --> 00:02:33,040 you know that it targets any list items inside main-nav. 41 00:02:33,040 --> 00:02:34,790 I'll save this file and 42 00:02:34,790 --> 00:02:40,038 in the CSS output, notice how SAS outputs two separate rules at the root level. 43 00:02:40,038 --> 00:02:45,460 One for main-nav and a descendant selector for main-nav li. 44 00:02:45,460 --> 00:02:50,750 Now let's nest another rule that targets all anchor elements inside main-nav. 45 00:02:50,750 --> 00:02:57,195 So right below the li rule, We'll create a rule that targets atags inside main nerve. 46 00:02:58,225 --> 00:03:03,145 We'll set the color to the white variable, the fond 47 00:03:03,145 --> 00:03:08,092 size to 0.85m. 48 00:03:08,092 --> 00:03:12,165 Then we'll set the text separation to none. 49 00:03:13,860 --> 00:03:17,010 and the text transform value to upper case. 50 00:03:21,800 --> 00:03:26,300 And finally a patting value of 0.5m 51 00:03:26,300 --> 00:03:30,540 will save the style sheet and over in the output CSS, 52 00:03:30,540 --> 00:03:35,180 Sass outputs the main nav a descendant selector at the root level. 53 00:03:35,180 --> 00:03:38,270 So notice how nesting saves you the extra step 54 00:03:38,270 --> 00:03:41,480 of having to type .main-nav in front of both selectors. 55 00:03:42,520 --> 00:03:46,500 Right below, you'll see a descendant selector that targets an H1 56 00:03:46,500 --> 00:03:48,870 inside an element with the class card. 57 00:03:49,950 --> 00:03:54,423 So let's move just the H1 rule inside the card rule. 58 00:04:02,947 --> 00:04:09,480 Nesting also gives you a shortcut when creating child and sibling selectors. 59 00:04:09,480 --> 00:04:13,710 Simply write the combinator before the selector, for instance use the direct 60 00:04:13,710 --> 00:04:19,430 child combinator to target an h1 and that is a direct child of card. 61 00:04:19,430 --> 00:04:22,340 This outputs the direct child selector at the root level. 62 00:04:23,420 --> 00:04:30,096 Next, we'll create another nested rule to style the icons inside card. 63 00:04:34,820 --> 00:04:40,150 First I'll remove the direct child combinator in front of the h1 selector. 64 00:04:40,150 --> 00:04:44,690 Then right below the h1 rule, create a rule that targets the class icon 65 00:04:46,530 --> 00:04:51,510 and set the color value to our color-primary variable. 66 00:04:51,510 --> 00:04:53,520 And you can also ask the group of selectors. 67 00:04:53,520 --> 00:04:55,800 For example, let's group icon. 68 00:04:57,080 --> 00:05:01,780 With the h1 selector since they share the same color property. 69 00:05:01,780 --> 00:05:07,180 Now we can remove the color declaration from the nested h1 rule. 70 00:05:07,180 --> 00:05:11,014 And when we save and compile our changes Sass outputs 71 00:05:11,014 --> 00:05:15,469 a group of descendants selectors for card icon and card h1. 72 00:05:22,767 --> 00:05:24,810 That's all there really is to nesting. 73 00:05:24,810 --> 00:05:26,320 But be careful. 74 00:05:26,320 --> 00:05:28,760 Too much code can make your code difficult to read and 75 00:05:28,760 --> 00:05:31,690 create loads of unnecessary CSS in your output. 76 00:05:31,690 --> 00:05:32,320 You see. 77 00:05:32,320 --> 00:05:36,420 There are no limits to the amount of selectors you are able to nest in a rule. 78 00:05:36,420 --> 00:05:39,610 For instance you could create a rule that's nested two, three, or 79 00:05:39,610 --> 00:05:41,490 more levels deep, like this. 80 00:05:42,950 --> 00:05:44,090 Looking at this rule for 81 00:05:44,090 --> 00:05:48,550 the first time would you know exactly what its meant to do, probably not right away. 82 00:05:48,550 --> 00:05:51,200 You might have to spend a few seconds figuring it out. 83 00:05:51,200 --> 00:05:53,270 Now take a look at the css output. 84 00:05:55,470 --> 00:05:59,280 We have deeply nested overqualified selectors, 85 00:05:59,280 --> 00:06:01,930 which are generally considered bad practice. 86 00:06:01,930 --> 00:06:04,290 All this unnecessary code is often referred to as "code bloat". 87 00:06:04,290 --> 00:06:08,600 Not only does this make your css difficult to maintain, it could also affect 88 00:06:08,600 --> 00:06:13,080 the performance of your site because the extra code increases file size. 89 00:06:13,080 --> 00:06:16,960 Writing selectors that are heavily dependent on the structure of your HTML 90 00:06:16,960 --> 00:06:18,650 makes your CSS fragile. 91 00:06:18,650 --> 00:06:23,000 If you change any of these tags or class names in the HTML it will 92 00:06:23,000 --> 00:06:26,460 break your selector and your styles will no longer be applied. 93 00:06:26,460 --> 00:06:31,050 Sass should help us write CSS faster while keeping our style sheets performant, 94 00:06:31,050 --> 00:06:32,490 easily readable and maintainable. 95 00:06:32,490 --> 00:06:34,860 So don't overcomplicated nesting. 96 00:06:34,860 --> 00:06:38,400 It's usually a good idea to nest no deeper than two levels. 97 00:06:38,400 --> 00:06:42,034 As you can see, anything more than that affects the readability of the code. 98 00:06:45,351 --> 00:06:50,157 For example, for this navigation, nesting is useful because 99 00:06:50,157 --> 00:06:55,070 the list items are dependent on main nav and its context. 100 00:06:55,070 --> 00:06:59,820 Now I could have also nested the a rule within the ally rule, 101 00:06:59,820 --> 00:07:04,690 like this, but the extra specificity just isn't necessary here. 102 00:07:04,690 --> 00:07:08,850 So I created the selector as a descendant of main-nav. 103 00:07:08,850 --> 00:07:11,170 It's always a good idea to avoid unnecessary nesting. 104 00:07:12,350 --> 00:07:15,580 Up next you'll learn more about the way selector nesting can assist how you 105 00:07:15,580 --> 00:07:16,760 create rules. 106 00:07:16,760 --> 00:07:20,380 Before moving on to the next video, why dont you try nesting these lectures for 107 00:07:20,380 --> 00:07:22,050 each one and paragraph inside the header.