"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
Learn how nested selectors make writing descendant and complex selectors fast and simple.
Sass also provides a shorthand for writing properties using CSS namespaces:
.button {
text: {
align: center;
decoration: none;
transform: uppercase;
}
}
Compiles to:
.button {
text-align: center;
text-decoration: none;
text-transform: uppercase;
}
Resources
Videos
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
[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
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