1
00:00:00,000 --> 00:00:04,803
[MUSIC]

2
00:00:04,803 --> 00:00:06,073
Earlier you set up Sass and

3
00:00:06,073 --> 00:00:10,250
got started using variables to avoid
repeating values in multiple places.

4
00:00:10,250 --> 00:00:14,170
In stage, you'll learn to integrate the
stylish time saving features of Sass into

5
00:00:14,170 --> 00:00:15,290
your daily work flow and

6
00:00:15,290 --> 00:00:19,219
you'll quickly experience why Sass is one
of the standard ways for writing CSS.

7
00:00:20,300 --> 00:00:22,970
First, I'll teach you how Sass
makes writing descendent and

8
00:00:22,970 --> 00:00:25,520
complex selectors fast and simple.

9
00:00:25,520 --> 00:00:27,930
You've probably created descendent,
sibling,

10
00:00:27,930 --> 00:00:30,860
or direct child selectors
like this at some point.

11
00:00:30,860 --> 00:00:33,390
These selectors are a great
way to create styles that

12
00:00:33,390 --> 00:00:35,830
target very specific elements on a page.

13
00:00:35,830 --> 00:00:38,960
But they can require a lot of typing
as you specify selectors that

14
00:00:38,960 --> 00:00:41,380
map to the structure of your HTML.

15
00:00:41,380 --> 00:00:46,070
What Sass provides a helpful solution to
all of these typing with nested selectors.

16
00:00:46,070 --> 00:00:49,650
Nesting also helps you write selectors
in a less repetitive and organized way.

17
00:00:51,210 --> 00:00:52,260
In the next few videos,

18
00:00:52,260 --> 00:00:56,000
I'll be displaying the SCSS and
output CSS files side by side.

19
00:00:56,000 --> 00:01:00,760
So that we're able to see how Sass
compiles SCSS syntax into plain CSS.

20
00:01:00,760 --> 00:01:03,917
Be sure to launch the work
space with this video or

21
00:01:03,917 --> 00:01:08,691
download the project files to get all
the latest files and in the console or

22
00:01:08,691 --> 00:01:12,014
on sass --watch scss:css
to start the watcher.

23
00:01:14,710 --> 00:01:19,551
You're composing nester selector in Sass
by creating a rule inside another rule

24
00:01:19,551 --> 00:01:22,640
similar to the way tags
are nested in HTML.

25
00:01:22,640 --> 00:01:26,120
A good use for selector nesting
is when styling a navigation.

26
00:01:26,120 --> 00:01:30,360
For example, let's create a nested
rule that styles the list items

27
00:01:30,360 --> 00:01:33,940
inside this UL with a class main-nav.

28
00:01:33,940 --> 00:01:39,010
We'll scroll down to the component
section of the style sheet and

29
00:01:39,010 --> 00:01:43,900
instead of typing a descendant
selector like main-nav

30
00:01:43,900 --> 00:01:49,230
li in a separate rule or
creating an li rule that would target

31
00:01:49,230 --> 00:01:53,690
every list item on the page, we'll create
it right will then the amin nav rule.

32
00:01:56,060 --> 00:02:02,369
So right below the margin top declaration,

33
00:02:02,369 --> 00:02:05,779
let's nest an li rule,

34
00:02:05,779 --> 00:02:10,894
we'll set this li display to inline

35
00:02:10,894 --> 00:02:15,852
block in the margin to 0.65 m.

36
00:02:15,852 --> 00:02:20,440
This scopes the li rule to
the main nav have selector.

37
00:02:20,440 --> 00:02:21,620
When used properly,

38
00:02:21,620 --> 00:02:24,970
nesting can be parts of your style
sheet easier to write and maintain.

39
00:02:24,970 --> 00:02:28,350
For instance, by just looking
at the hierarchy of this rule,

40
00:02:28,350 --> 00:02:33,040
you know that it targets any
list items inside main-nav.

41
00:02:33,040 --> 00:02:34,790
I'll save this file and

42
00:02:34,790 --> 00:02:40,038
in the CSS output, notice how SAS outputs
two separate rules at the root level.

43
00:02:40,038 --> 00:02:45,460
One for main-nav and
a descendant selector for main-nav li.

44
00:02:45,460 --> 00:02:50,750
Now let's nest another rule that targets
all anchor elements inside main-nav.

45
00:02:50,750 --> 00:02:57,195
So right below the li rule, We'll create a
rule that targets atags inside main nerve.

46
00:02:58,225 --> 00:03:03,145
We'll set the color to the white variable,
the fond

47
00:03:03,145 --> 00:03:08,092
size to 0.85m.

48
00:03:08,092 --> 00:03:12,165
Then we'll set the text
separation to none.

49
00:03:13,860 --> 00:03:17,010
and the text transform
value to upper case.

50
00:03:21,800 --> 00:03:26,300
And finally a patting value of 0.5m

51
00:03:26,300 --> 00:03:30,540
will save the style sheet and
over in the output CSS,

52
00:03:30,540 --> 00:03:35,180
Sass outputs the main nav a descendant
selector at the root level.

53
00:03:35,180 --> 00:03:38,270
So notice how nesting
saves you the extra step

54
00:03:38,270 --> 00:03:41,480
of having to type .main-nav
in front of both selectors.

55
00:03:42,520 --> 00:03:46,500
Right below, you'll see a descendant
selector that targets an H1

56
00:03:46,500 --> 00:03:48,870
inside an element with the class card.

57
00:03:49,950 --> 00:03:54,423
So let's move just the H1
rule inside the card rule.

58
00:04:02,947 --> 00:04:09,480
Nesting also gives you a shortcut when
creating child and sibling selectors.

59
00:04:09,480 --> 00:04:13,710
Simply write the combinator before
the selector, for instance use the direct

60
00:04:13,710 --> 00:04:19,430
child combinator to target an h1 and
that is a direct child of card.

61
00:04:19,430 --> 00:04:22,340
This outputs the direct child
selector at the root level.

62
00:04:23,420 --> 00:04:30,096
Next, we'll create another nested
rule to style the icons inside card.

63
00:04:34,820 --> 00:04:40,150
First I'll remove the direct child
combinator in front of the h1 selector.

64
00:04:40,150 --> 00:04:44,690
Then right below the h1 rule,
create a rule that targets the class icon

65
00:04:46,530 --> 00:04:51,510
and set the color value to
our color-primary variable.

66
00:04:51,510 --> 00:04:53,520
And you can also ask
the group of selectors.

67
00:04:53,520 --> 00:04:55,800
For example, let's group icon.

68
00:04:57,080 --> 00:05:01,780
With the h1 selector since they
share the same color property.

69
00:05:01,780 --> 00:05:07,180
Now we can remove the color
declaration from the nested h1 rule.

70
00:05:07,180 --> 00:05:11,014
And when we save and
compile our changes Sass outputs

71
00:05:11,014 --> 00:05:15,469
a group of descendants selectors for
card icon and card h1.

72
00:05:22,767 --> 00:05:24,810
That's all there really is to nesting.

73
00:05:24,810 --> 00:05:26,320
But be careful.

74
00:05:26,320 --> 00:05:28,760
Too much code can make your
code difficult to read and

75
00:05:28,760 --> 00:05:31,690
create loads of unnecessary
CSS in your output.

76
00:05:31,690 --> 00:05:32,320
You see.

77
00:05:32,320 --> 00:05:36,420
There are no limits to the amount of
selectors you are able to nest in a rule.

78
00:05:36,420 --> 00:05:39,610
For instance you could create
a rule that's nested two, three, or

79
00:05:39,610 --> 00:05:41,490
more levels deep, like this.

80
00:05:42,950 --> 00:05:44,090
Looking at this rule for

81
00:05:44,090 --> 00:05:48,550
the first time would you know exactly what
its meant to do, probably not right away.

82
00:05:48,550 --> 00:05:51,200
You might have to spend a few
seconds figuring it out.

83
00:05:51,200 --> 00:05:53,270
Now take a look at the css output.

84
00:05:55,470 --> 00:05:59,280
We have deeply nested
overqualified selectors,

85
00:05:59,280 --> 00:06:01,930
which are generally
considered bad practice.

86
00:06:01,930 --> 00:06:04,290
All this unnecessary code
is often referred to as "code bloat".

87
00:06:04,290 --> 00:06:08,600
Not only does this make your css difficult
to maintain, it could also affect

88
00:06:08,600 --> 00:06:13,080
the performance of your site because
the extra code increases file size.

89
00:06:13,080 --> 00:06:16,960
Writing selectors that are heavily
dependent on the structure of your HTML

90
00:06:16,960 --> 00:06:18,650
makes your CSS fragile.

91
00:06:18,650 --> 00:06:23,000
If you change any of these tags or
class names in the HTML it will

92
00:06:23,000 --> 00:06:26,460
break your selector and
your styles will no longer be applied.

93
00:06:26,460 --> 00:06:31,050
Sass should help us write CSS faster while
keeping our style sheets performant,

94
00:06:31,050 --> 00:06:32,490
easily readable and maintainable.

95
00:06:32,490 --> 00:06:34,860
So don't overcomplicated nesting.

96
00:06:34,860 --> 00:06:38,400
It's usually a good idea to
nest no deeper than two levels.

97
00:06:38,400 --> 00:06:42,034
As you can see, anything more than that
affects the readability of the code.

98
00:06:45,351 --> 00:06:50,157
For example, for this navigation,
nesting is useful because

99
00:06:50,157 --> 00:06:55,070
the list items are dependent
on main nav and its context.

100
00:06:55,070 --> 00:06:59,820
Now I could have also nested
the a rule within the ally rule,

101
00:06:59,820 --> 00:07:04,690
like this, but the extra specificity
just isn't necessary here.

102
00:07:04,690 --> 00:07:08,850
So I created the selector as
a descendant of main-nav.

103
00:07:08,850 --> 00:07:11,170
It's always a good idea to
avoid unnecessary nesting.

104
00:07:12,350 --> 00:07:15,580
Up next you'll learn more about the way
selector nesting can assist how you

105
00:07:15,580 --> 00:07:16,760
create rules.

106
00:07:16,760 --> 00:07:20,380
Before moving on to the next video, why
dont you try nesting these lectures for

107
00:07:20,380 --> 00:07:22,050
each one and paragraph inside the header.