1
00:00:01.00 --> 00:00:02.02
- [Instructor] Hi, this is Chris Converse

2
00:00:02.02 --> 00:00:03.01
and in this episode,

3
00:00:03.01 --> 00:00:05.04
we'll be looking at using SASS and LESS

4
00:00:05.04 --> 00:00:08.09
to more efficiently apply
colors to our CSS properties.

5
00:00:08.09 --> 00:00:11.07
Now we'll start with a project
from an earlier episode,

6
00:00:11.07 --> 00:00:15.00
where we created a neon
text effect in CSS.

7
00:00:15.00 --> 00:00:18.01
This technique required
compounding multiple properties,

8
00:00:18.01 --> 00:00:20.01
meaning we had to repeat
some property values

9
00:00:20.01 --> 00:00:22.01
a number of different times.

10
00:00:22.01 --> 00:00:22.09
In this episode,

11
00:00:22.09 --> 00:00:26.05
we'll define those values
or colors as variables,

12
00:00:26.05 --> 00:00:30.00
once in a SASS file and
another time in a LESS file.

13
00:00:30.00 --> 00:00:31.04
And then, we'll apply those variables

14
00:00:31.04 --> 00:00:33.01
within our CSS properties,

15
00:00:33.01 --> 00:00:35.00
giving us the ability to change the colors

16
00:00:35.00 --> 00:00:37.09
of the effect from one place.

17
00:00:37.09 --> 00:00:39.02
Now if you'd like to follow along,

18
00:00:39.02 --> 00:00:41.01
you can download the exercise files.

19
00:00:41.01 --> 00:00:42.07
However, you will need to be familiar

20
00:00:42.07 --> 00:00:45.00
with CSS Pre-Processing workflow,

21
00:00:45.00 --> 00:00:46.09
which includes using software to convert

22
00:00:46.09 --> 00:00:49.08
or process your files into CSS.

23
00:00:49.08 --> 00:00:52.01
Otherwise, you can simply
watch the short tutorial

24
00:00:52.01 --> 00:00:53.09
and decide if this is a workflow

25
00:00:53.09 --> 00:00:55.06
that you'd like to explore later,

26
00:00:55.06 --> 00:00:59.03
by watching a more in-depth
course on CSS Pre-Processing.

27
00:00:59.03 --> 00:01:00.09
Now if you download the exercise files,

28
00:01:00.09 --> 00:01:03.05
there's going to be two
folders inside of that archive.

29
00:01:03.05 --> 00:01:05.09
There's a Development
folder and a Publish folder.

30
00:01:05.09 --> 00:01:07.02
In the Development folder,

31
00:01:07.02 --> 00:01:10.03
there's a less folder and a sass folder

32
00:01:10.03 --> 00:01:13.03
and inside the less folder
is a style.less file

33
00:01:13.03 --> 00:01:17.07
and inside the sass folder
is a file called style.scss.

34
00:01:17.07 --> 00:01:19.08
For my particular pre-processing software,

35
00:01:19.08 --> 00:01:21.07
I'm using a product called Code Kit

36
00:01:21.07 --> 00:01:23.05
so in my particular files here,

37
00:01:23.05 --> 00:01:25.09
there's a config.codekit3 file.

38
00:01:25.09 --> 00:01:27.08
Your folders will not have these files,

39
00:01:27.08 --> 00:01:30.05
unless of course, you're
using Code Kit as well.

40
00:01:30.05 --> 00:01:33.01
Now down in the Publish folder,

41
00:01:33.01 --> 00:01:35.01
there's an Images directory
with our city background.

42
00:01:35.01 --> 00:01:36.09
There's an index.html file

43
00:01:36.09 --> 00:01:39.08
and there's a style.css file.

44
00:01:39.08 --> 00:01:41.06
Now the pre-processing software

45
00:01:41.06 --> 00:01:42.06
that you're going to be using,

46
00:01:42.06 --> 00:01:44.01
whether it's LESS or SASS,

47
00:01:44.01 --> 00:01:46.02
is going to compile these source files

48
00:01:46.02 --> 00:01:49.07
into this resulting style.css file.

49
00:01:49.07 --> 00:01:50.09
So to see what we're working with,

50
00:01:50.09 --> 00:01:54.04
let's come in here and open
index.html up in the browser.

51
00:01:54.04 --> 00:01:56.06
So this is that previous
project we're going

52
00:01:56.06 --> 00:01:57.05
to be working with

53
00:01:57.05 --> 00:01:59.02
and we're going to be
setting up the colors

54
00:01:59.02 --> 00:02:01.06
in the neon text effect
so that we can change all

55
00:02:01.06 --> 00:02:04.00
of those properties from one spot.

56
00:02:04.00 --> 00:02:06.02
So to begin, let's come
back to the exercise files

57
00:02:06.02 --> 00:02:10.08
and let's open up the style.scss
file in a text editor.

58
00:02:10.08 --> 00:02:13.05
Now even though this file ends in .scss

59
00:02:13.05 --> 00:02:16.04
and I'm using the SASS
CSS version of SASS,

60
00:02:16.04 --> 00:02:19.03
I haven't actually
added any SASS code yet.

61
00:02:19.03 --> 00:02:20.03
Now the other thing I want to do

62
00:02:20.03 --> 00:02:22.08
is to open up the resulting style.css file

63
00:02:22.08 --> 00:02:26.01
so we can see the conversion
happening in real time.

64
00:02:26.01 --> 00:02:27.02
So to do that in my text editor,

65
00:02:27.02 --> 00:02:32.02
I'm going to come up here
and just split the screen.

66
00:02:32.02 --> 00:02:34.02
Then I'll go back to the exercise files

67
00:02:34.02 --> 00:02:35.04
inside the Publish folder,

68
00:02:35.04 --> 00:02:38.04
I'm going to take style.css

69
00:02:38.04 --> 00:02:40.08
and open it in the second window.

70
00:02:40.08 --> 00:02:43.09
So again, on the left hand
side here, is the SASS file.

71
00:02:43.09 --> 00:02:45.05
On the right hand side, is the result

72
00:02:45.05 --> 00:02:49.02
of processing that SASS file into CSS.

73
00:02:49.02 --> 00:02:51.01
So we're not going to touch
this right hand side here,

74
00:02:51.01 --> 00:02:53.04
but my pre-processing
software will make the updates

75
00:02:53.04 --> 00:02:55.03
that we can see over here.

76
00:02:55.03 --> 00:02:57.07
So on the left hand
side, let's scroll down.

77
00:02:57.07 --> 00:02:59.03
Let's find this neon text.

78
00:02:59.03 --> 00:03:02.00
This is where we have all
of those compounded rules

79
00:03:02.00 --> 00:03:05.09
and repeating the same color values.

80
00:03:05.09 --> 00:03:07.08
So let's come up here, above neon

81
00:03:07.08 --> 00:03:10.02
and let's define a SASS variable.

82
00:03:10.02 --> 00:03:14.02
SASS variables start with a dollar sign

83
00:03:14.02 --> 00:03:17.01
and we'll name this color_1,

84
00:03:17.01 --> 00:03:19.00
then a colon, then a space.

85
00:03:19.00 --> 00:03:21.03
The syntax looks very much like CSS

86
00:03:21.03 --> 00:03:24.08
and then the values going
to be the white color.

87
00:03:24.08 --> 00:03:27.06
So put a pound sign, three F's,

88
00:03:27.06 --> 00:03:29.07
then a semicolon.

89
00:03:29.07 --> 00:03:32.04
So now that we've defined
a variable of color one,

90
00:03:32.04 --> 00:03:34.03
let's come in here and copy that.

91
00:03:34.03 --> 00:03:35.09
Let's come down into the CSS

92
00:03:35.09 --> 00:03:39.08
and let's replace the
pound sign and three F's

93
00:03:39.08 --> 00:03:42.05
with that color variable.

94
00:03:42.05 --> 00:03:43.06
So now with the first one in place,

95
00:03:43.06 --> 00:03:46.04
let's come down here and
replace the second one.

96
00:03:46.04 --> 00:03:48.04
Paste that in place and now at this point,

97
00:03:48.04 --> 00:03:51.03
I'm going to come in here
and hit command S to save.

98
00:03:51.03 --> 00:03:52.02
In the upper right hand corner,

99
00:03:52.02 --> 00:03:53.07
you'll see a notification.

100
00:03:53.07 --> 00:03:55.01
My particular software is telling me

101
00:03:55.01 --> 00:03:59.04
that it has compiled
this SCSS file into CSS

102
00:03:59.04 --> 00:04:01.09
and if I come over here
into this style.css file,

103
00:04:01.09 --> 00:04:04.06
I can see that the color is
still being injected here.

104
00:04:04.06 --> 00:04:07.00
So I can see the pound
sign and three F's here

105
00:04:07.00 --> 00:04:10.07
and the pound sign and three F's here.

106
00:04:10.07 --> 00:04:13.09
So there is no change in the
resulting style.css file,

107
00:04:13.09 --> 00:04:16.03
however, we did get to
just define the color one

108
00:04:16.03 --> 00:04:18.05
in our CSS file.

109
00:04:18.05 --> 00:04:20.09
So now let's come in here
and duplicate that variable.

110
00:04:20.09 --> 00:04:24.02
Let's name the second one color two

111
00:04:24.02 --> 00:04:27.00
and I'll come down here
and I'll copy the color.

112
00:04:27.00 --> 00:04:29.09
This is that bright pink color.

113
00:04:29.09 --> 00:04:33.01
Now let's come in here
and copy the color to name

114
00:04:33.01 --> 00:04:34.00
and then let's come down here

115
00:04:34.00 --> 00:04:36.02
and replace each instance of that hashtag

116
00:04:36.02 --> 00:04:40.02
for that color pink with
the color two variable.

117
00:04:40.02 --> 00:04:43.01
Once that's in place, all
the command has to save.

118
00:04:43.01 --> 00:04:45.08
Again, my software will tell
me that it's made the change

119
00:04:45.08 --> 00:04:48.00
and we can see the change
from the right hand side.

120
00:04:48.00 --> 00:04:48.08
And just like before,

121
00:04:48.08 --> 00:04:51.01
the style.css file will be that same,

122
00:04:51.01 --> 00:04:52.06
however, in the original file,

123
00:04:52.06 --> 00:04:54.07
we only had to specific the color once

124
00:04:54.07 --> 00:04:58.00
and we used four different instances.

125
00:04:58.00 --> 00:04:59.09
So at this point, we'll
go back to the browser.

126
00:04:59.09 --> 00:05:01.07
Let's come up and hit reload.

127
00:05:01.07 --> 00:05:04.03
The design should look exactly the same

128
00:05:04.03 --> 00:05:06.06
and so now that we have
variables in for our colors,

129
00:05:06.06 --> 00:05:08.07
let's go back to our SASS file

130
00:05:08.07 --> 00:05:10.06
and let's come in here
and make a color change.

131
00:05:10.06 --> 00:05:13.05
So for color two, let's
replace that pink color

132
00:05:13.05 --> 00:05:15.08
with a green color.

133
00:05:15.08 --> 00:05:19.02
So after the pound sign,
let's put two zeroes for red,

134
00:05:19.02 --> 00:05:23.01
let's put ff for green and ba for blue.

135
00:05:23.01 --> 00:05:24.04
Save,

136
00:05:24.04 --> 00:05:26.07
again, notice that the
style sheet's updated.

137
00:05:26.07 --> 00:05:27.06
If we come over here now,

138
00:05:27.06 --> 00:05:29.03
look at the bottom of this CSS file,

139
00:05:29.03 --> 00:05:32.00
we can now see that that
color has been applied

140
00:05:32.00 --> 00:05:35.03
four times in this particular CSS rule

141
00:05:35.03 --> 00:05:36.04
and then if we go back to the browser,

142
00:05:36.04 --> 00:05:38.03
come up and hit reload.

143
00:05:38.03 --> 00:05:40.07
We'll see the neon text effect
is now showing in green,

144
00:05:40.07 --> 00:05:42.03
instead of pink.

145
00:05:42.03 --> 00:05:45.03
And so now that our variables
are working in the SASS file,

146
00:05:45.03 --> 00:05:47.09
let's make the same
changes in our LESS file.

147
00:05:47.09 --> 00:05:50.04
So let's come in here and
select both color variables

148
00:05:50.04 --> 00:05:52.04
in the neon rule.

149
00:05:52.04 --> 00:05:54.03
Let's copy that to the clipboard,

150
00:05:54.03 --> 00:05:56.08
let's go back to our exercise files.

151
00:05:56.08 --> 00:05:59.00
Let's grab the style.less file,

152
00:05:59.00 --> 00:06:02.06
let's open that in our text editor.

153
00:06:02.06 --> 00:06:04.04
Let's scroll down to the bottom,

154
00:06:04.04 --> 00:06:08.09
let's come in here and
select the neon rule.

155
00:06:08.09 --> 00:06:09.08
Let's delete that,

156
00:06:09.08 --> 00:06:10.07
we'll hit a few returns

157
00:06:10.07 --> 00:06:13.05
and then we'll paste in our SASS code.

158
00:06:13.05 --> 00:06:16.02
And the only syntax difference
between LESS and SASS

159
00:06:16.02 --> 00:06:18.06
in this example is the
variables are defined

160
00:06:18.06 --> 00:06:21.05
with an at symbol
instead of a dollar sign.

161
00:06:21.05 --> 00:06:23.02
So let's come in here to color one,

162
00:06:23.02 --> 00:06:27.00
let's replace the dollar
sign with an at symbol.

163
00:06:27.00 --> 00:06:29.08
Let's come in to color
two, do the same thing

164
00:06:29.08 --> 00:06:31.08
and then down here
where we use the colors,

165
00:06:31.08 --> 00:06:33.06
we're going to replace
all of these dollar signs

166
00:06:33.06 --> 00:06:38.00
with an at symbol.

167
00:06:38.00 --> 00:06:40.01
And then before we hit
save and compile this,

168
00:06:40.01 --> 00:06:41.03
let's come up here and change the color

169
00:06:41.03 --> 00:06:46.02
from green to blue.

170
00:06:46.02 --> 00:06:48.01
So type zero, zero for red,

171
00:06:48.01 --> 00:06:52.04
b4 for green and two F's for blue.

172
00:06:52.04 --> 00:06:55.09
I'll hit save and our resulting CSS file,

173
00:06:55.09 --> 00:06:57.06
we'll now see we have four instances

174
00:06:57.06 --> 00:07:01.05
of that new blue color,
showing up in the neon class.

175
00:07:01.05 --> 00:07:02.07
Then we'll go back to the browser,

176
00:07:02.07 --> 00:07:06.05
hit reload and we'll see our
neon text now showing in blue

177
00:07:06.05 --> 00:07:07.09
and this time it was our LESS file

178
00:07:07.09 --> 00:07:11.04
that modified this CSS
instead of the SASS file.

179
00:07:11.04 --> 00:07:13.03
So now we have a much
more efficient workflow

180
00:07:13.03 --> 00:07:16.04
for generating reusable values in CSS.

181
00:07:16.04 --> 00:07:18.07
Now we'll be covering more
tips with pre-processors

182
00:07:18.07 --> 00:07:19.08
throughout this series,

183
00:07:19.08 --> 00:07:22.02
but if you'd like to learn
more about SASS and LESS

184
00:07:22.02 --> 00:07:24.01
and the software you'll
need to take advantage

185
00:07:24.01 --> 00:07:25.01
of this workflow,

186
00:07:25.01 --> 00:07:27.02
I'd recommend that you
take Joe Marini's course

187
00:07:27.02 --> 00:07:30.05
entitled CSS with LESS and SASS

188
00:07:30.05 --> 00:07:32.07
and so with that, I'll
conclude this episode

189
00:07:32.07 --> 00:07:35.06
and as always, thanks for watching.