- 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
Nested Selectors
7:23Learn how nested selectors make writing descendant and complex selectors fast and simple.
[MUSIC]
0:00
Earlier you set up Sass and
0:04
got started using variables to avoid
repeating values in multiple places.
0:06
In stage, you'll learn to integrate the
stylish time saving features of Sass into
0:10
your daily work flow and
0:14
you'll quickly experience why Sass is one
of the standard ways for writing CSS.
0:15
First, I'll teach you how Sass
makes writing descendent and
0:20
complex selectors fast and simple.
0:22
You've probably created descendent,
sibling,
0:25
or direct child selectors
like this at some point.
0:27
These selectors are a great
way to create styles that
0:30
target very specific elements on a page.
0:33
But they can require a lot of typing
as you specify selectors that
0:35
map to the structure of your HTML.
0:38
What Sass provides a helpful solution to
all of these typing with nested selectors.
0:41
Nesting also helps you write selectors
in a less repetitive and organized way.
0:46
In the next few videos,
0:51
I'll be displaying the SCSS and
output CSS files side by side.
0:52
So that we're able to see how Sass
compiles SCSS syntax into plain CSS.
0:56
Be sure to launch the work
space with this video or
1:00
download the project files to get all
the latest files and in the console or
1:03
on sass --watch scss:css
to start the watcher.
1:08
You're composing nester selector in Sass
by creating a rule inside another rule
1:14
similar to the way tags
are nested in HTML.
1:19
A good use for selector nesting
is when styling a navigation.
1:22
For example, let's create a nested
rule that styles the list items
1:26
inside this UL with a class main-nav.
1:30
We'll scroll down to the component
section of the style sheet and
1:33
instead of typing a descendant
selector like main-nav
1:39
li in a separate rule or
creating an li rule that would target
1:43
every list item on the page, we'll create
it right will then the amin nav rule.
1:49
So right below the margin top declaration,
1:56
let's nest an li rule,
2:02
we'll set this li display to inline
2:05
block in the margin to 0.65 m.
2:10
This scopes the li rule to
the main nav have selector.
2:15
When used properly,
2:20
nesting can be parts of your style
sheet easier to write and maintain.
2:21
For instance, by just looking
at the hierarchy of this rule,
2:24
you know that it targets any
list items inside main-nav.
2:28
I'll save this file and
2:33
in the CSS output, notice how SAS outputs
two separate rules at the root level.
2:34
One for main-nav and
a descendant selector for main-nav li.
2:40
Now let's nest another rule that targets
all anchor elements inside main-nav.
2:45
So right below the li rule, We'll create a
rule that targets atags inside main nerve.
2:50
We'll set the color to the white variable,
the fond
2:58
size to 0.85m.
3:03
Then we'll set the text
separation to none.
3:08
and the text transform
value to upper case.
3:13
And finally a patting value of 0.5m
3:21
will save the style sheet and
over in the output CSS,
3:26
Sass outputs the main nav a descendant
selector at the root level.
3:30
So notice how nesting
saves you the extra step
3:35
of having to type .main-nav
in front of both selectors.
3:38
Right below, you'll see a descendant
selector that targets an H1
3:42
inside an element with the class card.
3:46
So let's move just the H1
rule inside the card rule.
3:49
Nesting also gives you a shortcut when
creating child and sibling selectors.
4:02
Simply write the combinator before
the selector, for instance use the direct
4:09
child combinator to target an h1 and
that is a direct child of card.
4:13
This outputs the direct child
selector at the root level.
4:19
Next, we'll create another nested
rule to style the icons inside card.
4:23
First I'll remove the direct child
combinator in front of the h1 selector.
4:34
Then right below the h1 rule,
create a rule that targets the class icon
4:40
and set the color value to
our color-primary variable.
4:46
And you can also ask
the group of selectors.
4:51
For example, let's group icon.
4:53
With the h1 selector since they
share the same color property.
4:57
Now we can remove the color
declaration from the nested h1 rule.
5:01
And when we save and
compile our changes Sass outputs
5:07
a group of descendants selectors for
card icon and card h1.
5:11
That's all there really is to nesting.
5:22
But be careful.
5:24
Too much code can make your
code difficult to read and
5:26
create loads of unnecessary
CSS in your output.
5:28
You see.
5:31
There are no limits to the amount of
selectors you are able to nest in a rule.
5:32
For instance you could create
a rule that's nested two, three, or
5:36
more levels deep, like this.
5:39
Looking at this rule for
5:42
the first time would you know exactly what
its meant to do, probably not right away.
5:44
You might have to spend a few
seconds figuring it out.
5:48
Now take a look at the css output.
5:51
We have deeply nested
overqualified selectors,
5:55
which are generally
considered bad practice.
5:59
All this unnecessary code
is often referred to as "code bloat".
6:01
Not only does this make your css difficult
to maintain, it could also affect
6:04
the performance of your site because
the extra code increases file size.
6:08
Writing selectors that are heavily
dependent on the structure of your HTML
6:13
makes your CSS fragile.
6:16
If you change any of these tags or
class names in the HTML it will
6:18
break your selector and
your styles will no longer be applied.
6:23
Sass should help us write CSS faster while
keeping our style sheets performant,
6:26
easily readable and maintainable.
6:31
So don't overcomplicated nesting.
6:32
It's usually a good idea to
nest no deeper than two levels.
6:34
As you can see, anything more than that
affects the readability of the code.
6:38
For example, for this navigation,
nesting is useful because
6:45
the list items are dependent
on main nav and its context.
6:50
Now I could have also nested
the a rule within the ally rule,
6:55
like this, but the extra specificity
just isn't necessary here.
6:59
So I created the selector as
a descendant of main-nav.
7:04
It's always a good idea to
avoid unnecessary nesting.
7:08
Up next you'll learn more about the way
selector nesting can assist how you
7:12
create rules.
7:15
Before moving on to the next video, why
dont you try nesting these lectures for
7:16
each one and paragraph inside the header.
7:20