"Swift Enums and Structs" was retired on May 31, 2020. You are now viewing the recommended replacement.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Sass Basics!
You have completed Sass Basics!
Preview
Sass lets you reference the parent selector of a nested rule using the ampersand (&) symbol –– it's one of Sass' most useful features!
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
With Sass you can reference
the parent selector of a nested 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 upYou need to sign up for Treehouse in order to set up Workspace
Sign up