1
00:00:01.03 --> 00:00:02.06
- [Instructor] Hi, this is Chris Converse,

2
00:00:02.06 --> 00:00:04.01
and in this episode, we'll look at how

3
00:00:04.01 --> 00:00:06.00
nesting techniques in SASS can reduce

4
00:00:06.00 --> 00:00:08.02
the amount of CSS that you need to write.

5
00:00:08.02 --> 00:00:11.00
In CSS, writing specific
selectors requires

6
00:00:11.00 --> 00:00:12.05
that you repeat the selector names

7
00:00:12.05 --> 00:00:15.04
quite a few times, once
for each rule, in fact.

8
00:00:15.04 --> 00:00:17.03
SASS allows us to nest selectors

9
00:00:17.03 --> 00:00:19.06
when writing CSS, and once compiled,

10
00:00:19.06 --> 00:00:21.05
the resulting CSS will contain the more

11
00:00:21.05 --> 00:00:24.02
verbose rules required by a web browser.

12
00:00:24.02 --> 00:00:25.06
And in a future episode, we'll cover

13
00:00:25.06 --> 00:00:28.09
a similar technique using
LESS instead of SASS.

14
00:00:28.09 --> 00:00:31.01
So to follow along with
me in this episode,

15
00:00:31.01 --> 00:00:32.05
download the exercise files,

16
00:00:32.05 --> 00:00:34.06
get your pre-processor software ready,

17
00:00:34.06 --> 00:00:35.09
and let's begin by exploring what's

18
00:00:35.09 --> 00:00:37.08
in the exercise files.

19
00:00:37.08 --> 00:00:40.09
So in the exercise files
we have an index.html file.

20
00:00:40.09 --> 00:00:45.00
This file links to the
file called style.css.

21
00:00:45.00 --> 00:00:47.02
And this file is actually compiled

22
00:00:47.02 --> 00:00:50.05
from our .scss file, which is the

23
00:00:50.05 --> 00:00:53.02
SASS CSS form of SASS.

24
00:00:53.02 --> 00:00:55.04
Now your pre-processor
software will convert

25
00:00:55.04 --> 00:00:58.03
the SASS file into the CSS file.

26
00:00:58.03 --> 00:01:00.03
So in my workflow, the pre-processor

27
00:01:00.03 --> 00:01:02.00
I'm using is called CodeKit.

28
00:01:02.00 --> 00:01:04.03
So in my particular files,
I have a CodeKit file

29
00:01:04.03 --> 00:01:06.02
showing up here, but this file

30
00:01:06.02 --> 00:01:08.01
is not included in the exercise files.

31
00:01:08.01 --> 00:01:09.05
Of course, if you're using CodeKit,

32
00:01:09.05 --> 00:01:11.04
CodeKit will generate this file for you,

33
00:01:11.04 --> 00:01:13.06
or you can use any pre-processor software

34
00:01:13.06 --> 00:01:17.01
that will convert your SASS file into CSS.

35
00:01:17.01 --> 00:01:18.05
So to begin, let's come down here

36
00:01:18.05 --> 00:01:20.06
and select index.html, and let's

37
00:01:20.06 --> 00:01:22.08
open this in our text editor.

38
00:01:22.08 --> 00:01:24.07
So once you have the HTML file open,

39
00:01:24.07 --> 00:01:26.01
you'll see in the head area,

40
00:01:26.01 --> 00:01:28.08
we have a link to style.css.

41
00:01:28.08 --> 00:01:31.03
In the body area, we have a header

42
00:01:31.03 --> 00:01:33.04
and an article element.

43
00:01:33.04 --> 00:01:34.09
Inside of the article element we have

44
00:01:34.09 --> 00:01:36.08
three aside elements.

45
00:01:36.08 --> 00:01:38.02
We're going to turn these aside elements

46
00:01:38.02 --> 00:01:39.08
into columns and we're
going to use nesting

47
00:01:39.08 --> 00:01:41.08
techniques in SASS to reduce the

48
00:01:41.08 --> 00:01:44.02
amount of CSS we need to write.

49
00:01:44.02 --> 00:01:46.03
Now if you'd like to see the
layout we're working with,

50
00:01:46.03 --> 00:01:48.07
you can open index.html in a browser.

51
00:01:48.07 --> 00:01:50.02
So we're going to be taking these three

52
00:01:50.02 --> 00:01:52.00
aside elements here, with windmills,

53
00:01:52.00 --> 00:01:53.08
museums, and canals, and we're going to

54
00:01:53.08 --> 00:01:56.07
turn these into columns.

55
00:01:56.07 --> 00:01:58.09
So now let's go back
to the exercise files.

56
00:01:58.09 --> 00:02:02.07
Let's find style.scss.

57
00:02:02.07 --> 00:02:04.07
Let's open this in our text editor.

58
00:02:04.07 --> 00:02:06.00
And now in my particular text editor,

59
00:02:06.00 --> 00:02:07.04
I can split the screen and look at

60
00:02:07.04 --> 00:02:09.00
two different files.

61
00:02:09.00 --> 00:02:11.03
So what I'm going to
do is split the screen,

62
00:02:11.03 --> 00:02:13.04
go back to the exercise
files, then I'm going to

63
00:02:13.04 --> 00:02:16.05
open style.css in the second window.

64
00:02:16.05 --> 00:02:18.07
Now I'm doing this so
that we can see the CSS

65
00:02:18.07 --> 00:02:21.08
rules that will be generated
from our SASS file.

66
00:02:21.08 --> 00:02:24.00
So I'm going to be working
on the left-hand side

67
00:02:24.00 --> 00:02:25.07
in the SASS file, but we can see the

68
00:02:25.07 --> 00:02:29.01
results in the right-hand
side in the CSS file.

69
00:02:29.01 --> 00:02:30.07
So in my SASS file, I'm going to scroll

70
00:02:30.07 --> 00:02:32.07
all the way down here to the bottom.

71
00:02:32.07 --> 00:02:35.00
I put a CSS commenting here that says

72
00:02:35.00 --> 00:02:36.04
SASS nesting, so we're going to put our

73
00:02:36.04 --> 00:02:38.02
nesting rules below this.

74
00:02:38.02 --> 00:02:40.09
And let's start by targeting
the article element.

75
00:02:40.09 --> 00:02:44.04
So I'll type in article, space,

76
00:02:44.04 --> 00:02:46.01
add in our brackets.

77
00:02:46.01 --> 00:02:48.06
So now we'll come in
here and split this open

78
00:02:48.06 --> 00:02:50.02
and what we want to do is target the

79
00:02:50.02 --> 00:02:53.00
aside elements inside of the article.

80
00:02:53.00 --> 00:02:54.06
I'm going to hit a tab character just to

81
00:02:54.06 --> 00:02:56.01
format this a little bit,

82
00:02:56.01 --> 00:02:58.04
and then inside this article rule,

83
00:02:58.04 --> 00:03:00.04
we're going to add an aside rule.

84
00:03:00.04 --> 00:03:02.09
So I'll type aside, then a space,

85
00:03:02.09 --> 00:03:04.03
put in our brackets.

86
00:03:04.03 --> 00:03:06.00
I'm going to split these open,

87
00:03:06.00 --> 00:03:07.03
and now we're going to
put in some properties

88
00:03:07.03 --> 00:03:09.08
that are going to target
the aside element.

89
00:03:09.08 --> 00:03:11.03
So let's come up here and make sure

90
00:03:11.03 --> 00:03:13.03
we're inside of the
brackets for the aside.

91
00:03:13.03 --> 00:03:15.09
Let's come in here and
set a width property.

92
00:03:15.09 --> 00:03:19.08
So we'll set the width to 33%.

93
00:03:19.08 --> 00:03:22.04
Next line, let's set a float property.

94
00:03:22.04 --> 00:03:24.09
We're going to set float to left.

95
00:03:24.09 --> 00:03:26.09
Enter semicolon.

96
00:03:26.09 --> 00:03:30.08
Next line, let's add box sizing.

97
00:03:30.08 --> 00:03:34.02
We're going to set this to border box.

98
00:03:34.02 --> 00:03:36.09
And finally, let's come
in here and set padding.

99
00:03:36.09 --> 00:03:40.02
We'll set 15 on the top, 30 on the right,

100
00:03:40.02 --> 00:03:44.01
zero on the bottom and zero on the left.

101
00:03:44.01 --> 00:03:46.04
Now with these in place,
I'm going to hit save.

102
00:03:46.04 --> 00:03:47.09
My pre-processor software is going to

103
00:03:47.09 --> 00:03:50.09
process the SASS file into a CSS.

104
00:03:50.09 --> 00:03:52.05
So now, in my text editor,

105
00:03:52.05 --> 00:03:53.09
I'm going to scroll down to the bottom

106
00:03:53.09 --> 00:03:56.00
of the CSS file

107
00:03:56.00 --> 00:03:58.01
and notice that we got a rule here

108
00:03:58.01 --> 00:04:01.00
with article space aside.

109
00:04:01.00 --> 00:04:02.06
So the browser doesn't actually understand

110
00:04:02.06 --> 00:04:04.07
nested rules, but again, the SASS file

111
00:04:04.07 --> 00:04:07.04
is being processed into CSS.

112
00:04:07.04 --> 00:04:08.07
And now if we go back to the browser,

113
00:04:08.07 --> 00:04:10.04
hit reload, we can now see the effect

114
00:04:10.04 --> 00:04:13.03
of that CSS on those aside elements.

115
00:04:13.03 --> 00:04:14.08
So now, back in our SASS file,

116
00:04:14.08 --> 00:04:16.04
let's target the H2 elements that

117
00:04:16.04 --> 00:04:18.06
are inside of the aside.

118
00:04:18.06 --> 00:04:20.04
So we're going to nest the H2 selectors

119
00:04:20.04 --> 00:04:23.03
inside of the nested aside selector.

120
00:04:23.03 --> 00:04:24.07
So let's come in here, after padding,

121
00:04:24.07 --> 00:04:26.07
let's hit a few returns.

122
00:04:26.07 --> 00:04:28.04
I'll tab this in.

123
00:04:28.04 --> 00:04:32.00
Let's type H2, put in our brackets,

124
00:04:32.00 --> 00:04:33.07
split this open.

125
00:04:33.07 --> 00:04:36.00
Inside of the H2 selector,
let's come in here

126
00:04:36.00 --> 00:04:38.01
and set a few properties.

127
00:04:38.01 --> 00:04:40.08
So we'll set text transform.

128
00:04:40.08 --> 00:04:44.05
We're going to set this to uppercase.

129
00:04:44.05 --> 00:04:49.00
Next we'll set letter
spacing to five pixels.

130
00:04:49.00 --> 00:04:51.01
Next, we'll set the
padding to zero on the top,

131
00:04:51.01 --> 00:04:53.07
zero on the right, eight
pixels on the bottom,

132
00:04:53.07 --> 00:04:56.06
and zero on the left.

133
00:04:56.06 --> 00:04:59.04
Let's scroll up here a little bit.

134
00:04:59.04 --> 00:05:00.09
And then finally let's come in here

135
00:05:00.09 --> 00:05:03.01
and set border bottom.

136
00:05:03.01 --> 00:05:06.08
We're going to set this
to a size of one pixel.

137
00:05:06.08 --> 00:05:08.09
Set the style to solid,

138
00:05:08.09 --> 00:05:12.00
and for the color we'll use RGBA.

139
00:05:12.00 --> 00:05:14.05
So RGBA, put in our parentheses,

140
00:05:14.05 --> 00:05:16.08
we're going to set zero
for red, green, and blue,

141
00:05:16.08 --> 00:05:18.03
which will give us black.

142
00:05:18.03 --> 00:05:20.07
Then a comma, then .2 for the alpha.

143
00:05:20.07 --> 00:05:22.02
Next we'll target the paragraph elements

144
00:05:22.02 --> 00:05:24.00
inside of the aside.

145
00:05:24.00 --> 00:05:25.02
So let's get our cursor after the

146
00:05:25.02 --> 00:05:28.02
ending bracket for the H2.

147
00:05:28.02 --> 00:05:31.00
Let's hit a return, we'll
add a paragraph element.

148
00:05:31.00 --> 00:05:33.03
Put in our brackets, so the paragraph

149
00:05:33.03 --> 00:05:37.05
and the H2 are both inside
of the aside selector.

150
00:05:37.05 --> 00:05:38.08
So for paragraph, let's come in here

151
00:05:38.08 --> 00:05:41.00
and just simply set font size.

152
00:05:41.00 --> 00:05:44.03
We'll set this to .9ms.

153
00:05:44.03 --> 00:05:46.04
Semicolon.

154
00:05:46.04 --> 00:05:48.05
And again, inside of the aside selector,

155
00:05:48.05 --> 00:05:51.02
let's come in here and
target the images inside.

156
00:05:51.02 --> 00:05:54.00
So IMG, put in our brackets,

157
00:05:54.00 --> 00:05:56.02
split these open, and for the image,

158
00:05:56.02 --> 00:05:57.08
we're going to set a height,

159
00:05:57.08 --> 00:06:03.04
and the height's going to be set to 4.4ms.

160
00:06:03.04 --> 00:06:06.08
Next, we'll set a float property to left.

161
00:06:06.08 --> 00:06:08.06
And then, finally let's come in and set

162
00:06:08.06 --> 00:06:11.06
the margin to five pixels on the top,

163
00:06:11.06 --> 00:06:13.02
13 pixels on the right,

164
00:06:13.02 --> 00:06:16.00
zero on the bottom and zero on the left.

165
00:06:16.00 --> 00:06:17.08
Now we'll hit save.

166
00:06:17.08 --> 00:06:20.07
My SASS file will be converted to CSS.

167
00:06:20.07 --> 00:06:22.07
I'm going to scroll down
here in the CSS file,

168
00:06:22.07 --> 00:06:24.06
and we can see all of
the specific selectors

169
00:06:24.06 --> 00:06:26.00
that have been created by converting

170
00:06:26.00 --> 00:06:28.05
our SASS file to CSS.

171
00:06:28.05 --> 00:06:31.04
And then if we go back to the browser,

172
00:06:31.04 --> 00:06:33.00
hit reload, we can see the result

173
00:06:33.00 --> 00:06:38.01
of all of those CSS rules
that were generated.

174
00:06:38.01 --> 00:06:41.07
So now, when looking at
the final compiled CSS,

175
00:06:41.07 --> 00:06:43.06
the amount of code generated by SASS

176
00:06:43.06 --> 00:06:45.05
exceeds the amount of
code that we had to write

177
00:06:45.05 --> 00:06:47.05
into the SCSS file.

178
00:06:47.05 --> 00:06:49.03
And now, if you'd like to learn more about

179
00:06:49.03 --> 00:06:51.02
using SASS or LESS,

180
00:06:51.02 --> 00:06:53.02
I'd recommend taking Joe Marini's course

181
00:06:53.02 --> 00:06:55.08
entitled CSS with LESS and SASS,

182
00:06:55.08 --> 00:06:58.09
which is also available
here in the library.

183
00:06:58.09 --> 00:07:00.09
And so, with that, I'll
conclude this episode,

184
00:07:00.09 --> 00:07:03.09
and as always, thanks for watching.