- Nested Selectors 7:23
- Use the Ampersand to Reference Parent Selectors 6:57
- Write Nested Selectors 4 objectives
- Introducing Mixins 6:53
- Pass Content Blocks to Mixins 4:42
- Write a Mixin 4 objectives
- Extend the Properties of Selectors 4:05
- Extend Placeholder Selectors 5:04
- Practice Extending a Selector 3 objectives
- Using Comments 3:40
- Sass Workflow Review 7 questions
Preview
Video Player
00:00
00:00
Use the Ampersand to Reference Parent Selectors
6:57Sass 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 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