Use the Ampersand to Reference Parent Selectors6:57 with Guil Hernandez
Sass lets you reference the parent selector of a nested rule using the ampersand (&) symbol –– it's one of Sass' most useful features!
With SASS you can reference the parent selector of an STED rule 0:00 using the ampersand symbol, it's one of SASS's most useful features. 0:04 One of the best ways to use the ampersand is with pseudo classes and pseudo elements 0:08 or when you're defining a set of class names that share the same prefix. 0:11 The ampersand will help you write your selectors in a less repetitive way and 0:15 keep them nicely organized under one rule. 0:19 Let's start with a simple example by creating a rule that styles the anchor 0:22 elements on the page. 0:26 So, over in the base styles, I'll create a rule that styles anchor tags and 0:29 I set their color to the color primary variable, 0:37 And the text-decoration to none. 0:44 When styling links, you'll usually use pseudo classes like hover, 0:48 visited or active to style the different states of a link but instead of writing 0:53 each pseudo class as a separate selector, you can nest them inside a rule. 0:58 For now let's nest the hover pseudo class inside the A rule. 1:03 So on hover, we'll set the color of links to the color secondary variable, 1:10 saving the style sheet and having a look at the output, 1:16 we see that this doesn't quite give us the pseudo class we need. 1:21 The nesting outputs a space between the A selector and 1:26 pseudo class, which isn't going to produce the styling we want. 1:31 So we can use the ampersand symbol as a parent selector reference, 1:35 meaning that wherever we include an ampersand 1:41 SASS replaces it with a parent selector of the current rule. 1:44 So the ampersand here is instructing SASS, 1:48 hey I want you to place the parent selector of this rule right here. 1:51 So saving the file and having a look at the output, notice how the ampersand 1:56 gets replaced with the parent A selector and it closes up the space, 2:01 giving us the desired pseudo class selector at the root level. 2:06 Our site also uses the before and after pseudo elements 2:10 to create this visually interesting skewed effect in the header and footer. 2:16 So let's rewrite the styles for this using selector nesting and the ampersand. 2:22 First, we'll nest the header after pseudo element, 2:29 inside the header rule, [SOUND]. 2:38 And replace the header element selector with the ampersand. 2:43 And we'll repeat the same steps for the footer. 2:49 Replacing footer with the ampersand. 3:04 Now, we'll give this a save and over in the output CSS, 3:06 notice how the ampersand unwinds the nesting in each of the rules 3:13 outputting our two pseudo elements at the root level of the style sheet. 3:18 The ampersand also comes in handy when creating name space selectors or 3:31 variations of a selector. 3:35 For example, if you have a set of button classes that used the prefix btn, like 3:37 btn-callout, and btn-info, you don't have to retype the prefix in each selector. 3:42 I'll scroll down to the component styles and 3:49 the change the button info rule to just btn, 3:53 then inside the rule, I'll nest a couple of selectors using the ampersand. 3:59 So let's first nest &-callout, 4:03 and below that we'll nest &-info. 4:08 In the call out rule, 4:16 let's set the font size to 1.1m, 4:19 And the background color to color secondary. 4:27 Then in the info rule, 4:36 we can move the font size declaration from the bottom rule to the nested 4:38 info rule along with the background colour and margin top declarations. 4:43 So in this rule, the ampersand always refers to the parent button selector, 4:55 so when you save the SCSS and have a look at the output CSS for the button styles, 5:00 notice we have three separate selectors, one for the button class, 5:06 then right below it, two selectors for btn-callout and btn-info. 5:11 Over in the browser, we'll refresh and have a look at our buttons. 5:16 We've covered some of the ways you'll likely use the ampersand selector in your 5:24 projects but I also want to point out that the ampersand doesn't always have to be 5:28 the first character in a selector. 5:32 It can also be used later in the selector, for example, up in our base styles, 5:34 you'll see a p selector that styles all paragraphs. 5:41 So I wanna increase the font size of a paragraph 5:46 only when it's inside this div with the class intro. 5:49 With Sass, we can still do this within the scope of the p selector. 5:55 So right below the margin bottom declaration, 5:58 let's create a new rule that targets intro followed by the ampersand 6:02 symbol and set the font size to 1.2. 6:07 Placing the ampersand after a selector reverses the nesting order, 6:16 so this output eight descendent selector that targets a paragraph 6:21 element inside the class intro, neat. 6:26 I have posted links to helpful resources and videos that go further into selector 6:33 nesting and the ampersand symbol and the teacher's notes. 6:37 Now, why don't you try creating a hover selector for 6:40 the navigation links Inside main nav,. 6:44 You can use the ampersand symbol and 6:47 one of the color variables we defined earlier to change the color of a link on 6:49 hover, you can check how I did it in the final project files. 6:53
You need to sign up for Treehouse in order to download course files.Sign up