1
00:00:00.07 --> 00:00:02.08
- [Instructor] Hi, this is Chris Converse,

2
00:00:02.08 --> 00:00:04.01
and in this episode we'll take a look

3
00:00:04.01 --> 00:00:07.00
at how nesting techniques and
LESS, can reduce the amount

4
00:00:07.00 --> 00:00:09.00
of CSS you need to initially write.

5
00:00:09.00 --> 00:00:11.09
In CSS, writing specific
selectors requires

6
00:00:11.09 --> 00:00:14.04
that you repeat those selector
names quite a few times.

7
00:00:14.04 --> 00:00:16.04
Once for each rule, in fact.

8
00:00:16.04 --> 00:00:19.04
LESS allows us to nest the
selectors when writing our CSS,

9
00:00:19.04 --> 00:00:22.06
and once compiled, the
resulting CSS will contain

10
00:00:22.06 --> 00:00:25.03
the more verbose rules
required by a browser.

11
00:00:25.03 --> 00:00:28.02
We covered a similar technique
in a previous episode

12
00:00:28.02 --> 00:00:30.02
using SASS instead of
LESS, so if you would like

13
00:00:30.02 --> 00:00:33.02
to follow along with me,
download the Exercise Files,

14
00:00:33.02 --> 00:00:35.03
get your pre-processor software ready,

15
00:00:35.03 --> 00:00:39.05
and let's begin by exploring
what's in the Exercise Files.

16
00:00:39.05 --> 00:00:42.02
So in the exercise files,
there's an index.html file,

17
00:00:42.02 --> 00:00:45.03
this file links to the style.css file,

18
00:00:45.03 --> 00:00:50.02
and this file is compiled
from the LESS file here.

19
00:00:50.02 --> 00:00:51.09
And from my pre-processor,
I'm using a piece

20
00:00:51.09 --> 00:00:53.06
of software called CodeKit.

21
00:00:53.06 --> 00:00:55.04
So this CodeKit file
here will not be included

22
00:00:55.04 --> 00:00:57.04
in your files, unless
of course, you're going

23
00:00:57.04 --> 00:00:58.08
to be using CodeKit.

24
00:00:58.08 --> 00:01:00.09
And you can use any LESS
pre-processor that you want

25
00:01:00.09 --> 00:01:02.02
to follow along.

26
00:01:02.02 --> 00:01:04.06
So to begin, let's come
down and select index.html.

27
00:01:04.06 --> 00:01:06.07
And let's open this in a text editor.

28
00:01:06.07 --> 00:01:09.02
So once you have the file open,

29
00:01:09.02 --> 00:01:11.09
up in the head area, you'll
see that I am referencing

30
00:01:11.09 --> 00:01:14.05
the style.css file.

31
00:01:14.05 --> 00:01:17.04
Down in the body area, we have a header,

32
00:01:17.04 --> 00:01:19.01
and an article element.

33
00:01:19.01 --> 00:01:23.00
The article has three
asides, one for windmills,

34
00:01:23.00 --> 00:01:25.03
one for museums, and one for canals,

35
00:01:25.03 --> 00:01:26.09
and it's these aside
elements that we're going

36
00:01:26.09 --> 00:01:28.09
to be floating into columns.

37
00:01:28.09 --> 00:01:30.09
So we'll use nested techniques in LESS

38
00:01:30.09 --> 00:01:33.00
to reduce the amount of
CSS we would need to write

39
00:01:33.00 --> 00:01:34.07
to create these columns.

40
00:01:34.07 --> 00:01:35.07
And if you'd like to see
the layout we're going

41
00:01:35.07 --> 00:01:38.06
to be starting with, you can
open index.html in a browser

42
00:01:38.06 --> 00:01:41.08
so you can see those three
aside elements showing up here.

43
00:01:41.08 --> 00:01:43.07
And now to begin working on
our layout, let's go back

44
00:01:43.07 --> 00:01:47.03
to the Exercise Files,
let's file style.less,

45
00:01:47.03 --> 00:01:49.09
let's open this in our text editor,

46
00:01:49.09 --> 00:01:51.04
and now, in my particular text editor,

47
00:01:51.04 --> 00:01:54.01
I can split the screen,
and show two documents.

48
00:01:54.01 --> 00:01:57.00
So what I'm going to do is go
back to the Exercise Files,

49
00:01:57.00 --> 00:02:00.08
and open the style.css file
in my window on the right.

50
00:02:00.08 --> 00:02:02.00
This way, I can see the result

51
00:02:02.00 --> 00:02:05.04
of the LESS file being compiled into CSS.

52
00:02:05.04 --> 00:02:07.01
Now, in the LESS file, let's scroll down

53
00:02:07.01 --> 00:02:08.05
to the bottom.

54
00:02:08.05 --> 00:02:10.06
I added a CSS comment down here,

55
00:02:10.06 --> 00:02:13.06
for where we're going to
be adding our nesting.

56
00:02:13.06 --> 00:02:15.03
So after this comment, let's come in here

57
00:02:15.03 --> 00:02:18.03
and first target the article element.

58
00:02:18.03 --> 00:02:22.08
So type in article, then a
space, add in our brackets,

59
00:02:22.08 --> 00:02:25.01
let's split this open, and now inside

60
00:02:25.01 --> 00:02:26.08
of the article selector, we're going

61
00:02:26.08 --> 00:02:29.05
to add another selector for the aside.

62
00:02:29.05 --> 00:02:32.08
So I'm going to hit Tab to
keep this nicely formatted.

63
00:02:32.08 --> 00:02:38.01
Let's type aside, put in our
beginning and ending brackets.

64
00:02:38.01 --> 00:02:42.03
Next, let's split open the
brackets for the aside,

65
00:02:42.03 --> 00:02:44.04
now inside the aside
selector, let's come in here

66
00:02:44.04 --> 00:02:48.04
and set the width to 33%.

67
00:02:48.04 --> 00:02:51.08
On the next line, let's
set up float property.

68
00:02:51.08 --> 00:02:56.03
We're going to set the float to left.

69
00:02:56.03 --> 00:02:58.04
Next we'll set box sizing.

70
00:02:58.04 --> 00:03:01.03
We'll set this to border box.

71
00:03:01.03 --> 00:03:03.07
And then finally, let's
come in and add padding.

72
00:03:03.07 --> 00:03:06.04
So for the padding, we're going
to set 15 pixels on the top,

73
00:03:06.04 --> 00:03:08.07
30 pixels on the right,

74
00:03:08.07 --> 00:03:12.05
zero on the bottom, and zero on the left.

75
00:03:12.05 --> 00:03:14.03
So at this point I'll hit Save.

76
00:03:14.03 --> 00:03:16.05
My pre-processing software
will convert the LESS file

77
00:03:16.05 --> 00:03:18.08
into CSS, and now we'll come over here

78
00:03:18.08 --> 00:03:21.03
to the CSS file, scroll
down to the bottom,

79
00:03:21.03 --> 00:03:23.01
and I can see that my
nested rule was converted

80
00:03:23.01 --> 00:03:26.06
into article, space, aside.

81
00:03:26.06 --> 00:03:27.09
So now, with that working properly,

82
00:03:27.09 --> 00:03:30.02
let's go back to our less file and I want

83
00:03:30.02 --> 00:03:32.00
to target the h2 elements that are inside

84
00:03:32.00 --> 00:03:33.09
of the aside element.

85
00:03:33.09 --> 00:03:36.01
So after the padding
property, still inside

86
00:03:36.01 --> 00:03:39.01
of the aside selector,
let's hit a few returns,

87
00:03:39.01 --> 00:03:42.00
and let's add another selector for an h2.

88
00:03:42.00 --> 00:03:44.07
So we'll type h2, then a space, then put

89
00:03:44.07 --> 00:03:47.06
in our brackets, let's split these open,

90
00:03:47.06 --> 00:03:52.06
and inside of the h2 selector,
let's add some properties.

91
00:03:52.06 --> 00:03:54.06
So first, we'll set text transform,

92
00:03:54.06 --> 00:03:57.04
we'll set this to upper case.

93
00:03:57.04 --> 00:03:59.08
Next line, we'll set letter spacing.

94
00:03:59.08 --> 00:04:03.00
We're going to set this to 5 pixels.

95
00:04:03.00 --> 00:04:05.08
Next line, we're going to
set a padding property,

96
00:04:05.08 --> 00:04:08.00
we're going to set the
padding to zero on the top,

97
00:04:08.00 --> 00:04:10.07
zero on the right, eight
pixels on the bottom,

98
00:04:10.07 --> 00:04:13.00
and zero on the left.

99
00:04:13.00 --> 00:04:15.08
And then finally, we're going
to set a border bottom property.

100
00:04:15.08 --> 00:04:22.03
So, border-bottom, size is
one pixel, style is solid,

101
00:04:22.03 --> 00:04:25.00
and we're going to use
the RGBA color space,

102
00:04:25.00 --> 00:04:27.08
so rgba, put in our parentheses,

103
00:04:27.08 --> 00:04:31.07
we're going to use zero for red,
zero for green, zero for blue,

104
00:04:31.07 --> 00:04:35.05
and .2 for the alpha.

105
00:04:35.05 --> 00:04:38.01
I'll just scroll up here a little bit.

106
00:04:38.01 --> 00:04:40.01
Now, after the h2, but still inside

107
00:04:40.01 --> 00:04:43.00
of the aside selector, let's come in here

108
00:04:43.00 --> 00:04:44.09
and target the paragraph elements,

109
00:04:44.09 --> 00:04:49.03
so we'll type a p, then a
space, put in our brackets.

110
00:04:49.03 --> 00:04:51.09
Inside of the p selector,
we're going to come in here

111
00:04:51.09 --> 00:04:54.09
and set the font size,
we're going to set this

112
00:04:54.09 --> 00:04:57.06
to .9ems, semicolon.

113
00:04:57.06 --> 00:05:01.04
After the paragraph
selector, let's come in here

114
00:05:01.04 --> 00:05:04.00
and target the images that
are inside of the aside.

115
00:05:04.00 --> 00:05:07.08
So we'll type img, put
in our brackets, again,

116
00:05:07.08 --> 00:05:09.07
split this open, and for the images,

117
00:05:09.07 --> 00:05:14.05
we're going to set a
height property of 4.4ems.

118
00:05:14.05 --> 00:05:18.09
Next we'll set a float property of left,

119
00:05:18.09 --> 00:05:21.03
and then finally, we'll
set a margin property.

120
00:05:21.03 --> 00:05:23.05
We're going to set 5 pixels on the top,

121
00:05:23.05 --> 00:05:25.02
13 pixels on the right,

122
00:05:25.02 --> 00:05:26.01
zero on the bottom, and zero on the left.

123
00:05:26.01 --> 00:05:31.00
So with these in place, I'll hit Save.

124
00:05:31.00 --> 00:05:33.07
Over in the CSS file, let's scroll down,

125
00:05:33.07 --> 00:05:35.09
and we can see all of
the specific CSS rules

126
00:05:35.09 --> 00:05:39.05
that have been generated
from that LESS file.

127
00:05:39.05 --> 00:05:41.00
So now, we'll go back to the browser.

128
00:05:41.00 --> 00:05:42.09
I'll hit Reload, and now
we can see all of those

129
00:05:42.09 --> 00:05:46.09
aside elements are now being
converted into columns.

130
00:05:46.09 --> 00:05:49.05
So when looking at the
final compiled CSS file,

131
00:05:49.05 --> 00:05:50.07
the amount of code generated

132
00:05:50.07 --> 00:05:52.05
by LESS exceeds the amount of code

133
00:05:52.05 --> 00:05:55.01
that we actually had to
type into the LESS file.

134
00:05:55.01 --> 00:05:56.03
Now, if you would like to learn more

135
00:05:56.03 --> 00:05:58.09
about using LESS and SASS,
I'd recommend taking a look

136
00:05:58.09 --> 00:06:01.01
at Joe Marini's course entitled,

137
00:06:01.01 --> 00:06:04.03
CSS with LESS and SASS,
which is also available here

138
00:06:04.03 --> 00:06:05.07
in the library.

139
00:06:05.07 --> 00:06:07.09
And so, with that, I'll
conclude this episode,

140
00:06:07.09 --> 00:06:10.09
and, as always, thanks for watching.