1 00:00:00,640 --> 00:00:04,290 With Sass you can reference the parent selector of a nested rule 2 00:00:04,290 --> 00:00:08,110 using the ampersand symbol, it's one of SASS's most useful features. 3 00:00:08,110 --> 00:00:11,870 One of the best ways to use the ampersand is with pseudo classes and pseudo elements 4 00:00:11,870 --> 00:00:15,560 or when you're defining a set of class names that share the same prefix. 5 00:00:15,560 --> 00:00:19,220 The ampersand will help you write your selectors in a less repetitive way and 6 00:00:19,220 --> 00:00:22,100 keep them nicely organized under one rule. 7 00:00:22,100 --> 00:00:26,270 Let's start with a simple example by creating a rule that styles the anchor 8 00:00:26,270 --> 00:00:27,450 elements on the page. 9 00:00:29,880 --> 00:00:37,193 So, over in the base styles, I'll create a rule that styles anchor tags and 10 00:00:37,193 --> 00:00:41,900 I set their color to the color primary variable, 11 00:00:44,491 --> 00:00:47,353 And the text-decoration to none. 12 00:00:48,831 --> 00:00:53,560 When styling links, you'll usually use pseudo classes like hover, 13 00:00:53,560 --> 00:00:58,849 visited or active to style the different states of a link but instead of writing 14 00:00:58,849 --> 00:01:03,919 each pseudo class as a separate selector, you can nest them inside a rule. 15 00:01:03,919 --> 00:01:06,800 For now let's nest the hover pseudo class inside the A rule. 16 00:01:10,290 --> 00:01:16,601 So on hover, we'll set the color of links to the color secondary variable, 17 00:01:16,601 --> 00:01:21,137 saving the style sheet and having a look at the output, 18 00:01:21,137 --> 00:01:26,960 we see that this doesn't quite give us the pseudo class we need. 19 00:01:26,960 --> 00:01:31,830 The nesting outputs a space between the A selector and 20 00:01:31,830 --> 00:01:34,600 pseudo class, which isn't going to produce the styling we want. 21 00:01:35,690 --> 00:01:41,290 So we can use the ampersand symbol as a parent selector reference, 22 00:01:41,290 --> 00:01:44,610 meaning that wherever we include an ampersand 23 00:01:44,610 --> 00:01:48,320 SASS replaces it with a parent selector of the current rule. 24 00:01:48,320 --> 00:01:51,690 So the ampersand here is instructing SASS, 25 00:01:51,690 --> 00:01:56,110 hey I want you to place the parent selector of this rule right here. 26 00:01:56,110 --> 00:02:01,460 So saving the file and having a look at the output, notice how the ampersand 27 00:02:01,460 --> 00:02:06,250 gets replaced with the parent A selector and it closes up the space, 28 00:02:06,250 --> 00:02:09,340 giving us the desired pseudo class selector at the root level. 29 00:02:10,525 --> 00:02:16,675 Our site also uses the before and after pseudo elements 30 00:02:16,675 --> 00:02:22,695 to create this visually interesting skewed effect in the header and footer. 31 00:02:22,695 --> 00:02:26,915 So let's rewrite the styles for this using selector nesting and the ampersand. 32 00:02:29,814 --> 00:02:38,486 First, we'll nest the header after pseudo element, 33 00:02:38,486 --> 00:02:43,772 inside the header rule, [SOUND]. 34 00:02:43,772 --> 00:02:47,580 And replace the header element selector with the ampersand. 35 00:02:49,430 --> 00:02:51,260 And we'll repeat the same steps for the footer. 36 00:03:04,009 --> 00:03:06,652 Replacing footer with the ampersand. 37 00:03:06,652 --> 00:03:13,370 Now, we'll give this a save and over in the output CSS, 38 00:03:13,370 --> 00:03:18,830 notice how the ampersand unwinds the nesting in each of the rules 39 00:03:18,830 --> 00:03:22,090 outputting our two pseudo elements at the root level of the style sheet. 40 00:03:31,589 --> 00:03:35,669 The ampersand also comes in handy when creating name space selectors or 41 00:03:35,669 --> 00:03:37,650 variations of a selector. 42 00:03:37,650 --> 00:03:42,728 For example, if you have a set of button classes that used the prefix btn, like 43 00:03:42,728 --> 00:03:48,310 btn-callout, and btn-info, you don't have to retype the prefix in each selector. 44 00:03:49,430 --> 00:03:53,850 I'll scroll down to the component styles and 45 00:03:53,850 --> 00:03:58,030 the change the button info rule to just btn, 46 00:03:59,530 --> 00:04:03,270 then inside the rule, I'll nest a couple of selectors using the ampersand. 47 00:04:03,270 --> 00:04:08,170 So let's first nest &-callout, 48 00:04:08,170 --> 00:04:13,405 and below that we'll nest &-info. 49 00:04:16,794 --> 00:04:19,628 In the call out rule, 50 00:04:19,628 --> 00:04:24,519 let's set the font size to 1.1m, 51 00:04:27,508 --> 00:04:30,560 And the background color to color secondary. 52 00:04:36,501 --> 00:04:38,135 Then in the info rule, 53 00:04:38,135 --> 00:04:43,209 we can move the font size declaration from the bottom rule to the nested 54 00:04:43,209 --> 00:04:48,545 info rule along with the background colour and margin top declarations. 55 00:04:55,110 --> 00:05:00,719 So in this rule, the ampersand always refers to the parent button selector, 56 00:05:00,719 --> 00:05:06,413 so when you save the SCSS and have a look at the output CSS for the button styles, 57 00:05:06,413 --> 00:05:11,420 notice we have three separate selectors, one for the button class, 58 00:05:11,420 --> 00:05:16,570 then right below it, two selectors for btn-callout and btn-info. 59 00:05:16,570 --> 00:05:20,079 Over in the browser, we'll refresh and have a look at our buttons. 60 00:05:24,357 --> 00:05:28,423 We've covered some of the ways you'll likely use the ampersand selector in your 61 00:05:28,423 --> 00:05:32,487 projects but I also want to point out that the ampersand doesn't always have to be 62 00:05:32,487 --> 00:05:34,850 the first character in a selector. 63 00:05:34,850 --> 00:05:41,520 It can also be used later in the selector, for example, up in our base styles, 64 00:05:41,520 --> 00:05:46,060 you'll see a p selector that styles all paragraphs. 65 00:05:46,060 --> 00:05:49,140 So I wanna increase the font size of a paragraph 66 00:05:49,140 --> 00:05:53,170 only when it's inside this div with the class intro. 67 00:05:55,100 --> 00:05:58,790 With Sass, we can still do this within the scope of the p selector. 68 00:05:58,790 --> 00:06:02,380 So right below the margin bottom declaration, 69 00:06:02,380 --> 00:06:07,810 let's create a new rule that targets intro followed by the ampersand 70 00:06:07,810 --> 00:06:12,138 symbol and set the font size to 1.2. 71 00:06:16,113 --> 00:06:21,242 Placing the ampersand after a selector reverses the nesting order, 72 00:06:21,242 --> 00:06:26,196 so this output eight descendent selector that targets a paragraph 73 00:06:26,196 --> 00:06:29,215 element inside the class intro, neat. 74 00:06:33,882 --> 00:06:37,590 I have posted links to helpful resources and videos that go further into selector 75 00:06:37,590 --> 00:06:40,383 nesting and the ampersand symbol and the teacher's notes. 76 00:06:40,383 --> 00:06:44,236 Now, why don't you try creating a hover selector for 77 00:06:44,236 --> 00:06:47,240 the navigation links Inside main nav,. 78 00:06:47,240 --> 00:06:49,150 You can use the ampersand symbol and 79 00:06:49,150 --> 00:06:53,159 one of the color variables we defined earlier to change the color of a link on 80 00:06:53,159 --> 00:06:56,420 hover, you can check how I did it in the final project files.