1
00:00:01.02 --> 00:00:02.00
- [Instructor] Hi, this is Chris Converse

2
00:00:02.00 --> 00:00:03.08
and in this episode,
we'll be taking a look

3
00:00:03.08 --> 00:00:04.08
at adjusting colors

4
00:00:04.08 --> 00:00:07.08
in CSS using both SASS and LESS.

5
00:00:07.08 --> 00:00:09.04
Now when designing your project,

6
00:00:09.04 --> 00:00:10.05
you probably have some colors

7
00:00:10.05 --> 00:00:12.07
you want to use to defined
either in a creative brief

8
00:00:12.07 --> 00:00:15.02
or in a style or branding guide.

9
00:00:15.02 --> 00:00:18.02
Using SASS or LESS will
allow you to define a color,

10
00:00:18.02 --> 00:00:19.06
then adjust that color's properties

11
00:00:19.06 --> 00:00:21.04
with built in color functions.

12
00:00:21.04 --> 00:00:22.07
This will give you a quick and consistent

13
00:00:22.07 --> 00:00:24.00
way to define colors

14
00:00:24.00 --> 00:00:27.05
and generate new colors, based
on the rules of your project.

15
00:00:27.05 --> 00:00:29.03
So if you'd like to follow along with me,

16
00:00:29.03 --> 00:00:31.05
download the exercise
files and let's take a look

17
00:00:31.05 --> 00:00:34.02
at what's included.

18
00:00:34.02 --> 00:00:36.01
Now in the exercise
files, there's a SASS file

19
00:00:36.01 --> 00:00:40.08
which is .scss which is
written in the SASS css syntax

20
00:00:40.08 --> 00:00:42.02
and the LESS file.

21
00:00:42.02 --> 00:00:44.02
Each of these files is set to compile

22
00:00:44.02 --> 00:00:47.00
into the style.css file.

23
00:00:47.00 --> 00:00:47.09
And since I'm using code kit

24
00:00:47.09 --> 00:00:50.01
to compile my SASS and LESS files,

25
00:00:50.01 --> 00:00:51.07
I also have a code kit file here

26
00:00:51.07 --> 00:00:54.00
which is not included in your files.

27
00:00:54.00 --> 00:00:56.04
And typically, you would
only either work in SASS

28
00:00:56.04 --> 00:00:58.04
or LESS but for this particular tutorial,

29
00:00:58.04 --> 00:01:00.02
I'm going to be covering both.

30
00:01:00.02 --> 00:01:03.04
So to begin, let's start by
opening the Index.html file

31
00:01:03.04 --> 00:01:05.06
in the Text Editor.

32
00:01:05.06 --> 00:01:07.09
Now once you have the html
file open, you'll see here

33
00:01:07.09 --> 00:01:11.09
in the head area, I have a
link to the final compiled

34
00:01:11.09 --> 00:01:15.03
CSS file which is called style.css.

35
00:01:15.03 --> 00:01:19.00
Inside the body area, we have
a header and a main element.

36
00:01:19.00 --> 00:01:22.01
Inside of the main, we have
an article and then a side.

37
00:01:22.01 --> 00:01:24.02
And then outside of the main
element, I have a few divs

38
00:01:24.02 --> 00:01:25.08
just to create some color bars.

39
00:01:25.08 --> 00:01:26.09
Just so we have a few extra elements

40
00:01:26.09 --> 00:01:30.02
to apply some color adjustments to.

41
00:01:30.02 --> 00:01:31.04
And if you'd like to preview this file,

42
00:01:31.04 --> 00:01:33.01
you can open index.html in a browser

43
00:01:33.01 --> 00:01:35.01
to see the layout.

44
00:01:35.01 --> 00:01:37.04
Inside of the browser,
everything here that's showing up

45
00:01:37.04 --> 00:01:40.01
in blue is being controlled
by a color variable

46
00:01:40.01 --> 00:01:42.08
that we have setup in both LESS and SASS.

47
00:01:42.08 --> 00:01:45.06
And we're going to be
starting with our SASS file.

48
00:01:45.06 --> 00:01:46.09
So to begin making our adjustments,

49
00:01:46.09 --> 00:01:49.02
let's go back to the exercise files

50
00:01:49.02 --> 00:01:51.08
and let's find style.scss
and let's open that in our

51
00:01:51.08 --> 00:01:53.09
Text Editor.

52
00:01:53.09 --> 00:01:54.07
Now inside of here at the top

53
00:01:54.07 --> 00:01:57.01
you can see we have a color variable.

54
00:01:57.01 --> 00:01:59.03
We covered color
variables in SASS and LESS

55
00:01:59.03 --> 00:02:02.05
in an earlier episode and we're
setting this color variable

56
00:02:02.05 --> 00:02:05.00
equal to this blue color here.

57
00:02:05.00 --> 00:02:06.03
And then if I scroll through the document,

58
00:02:06.03 --> 00:02:09.02
you'll see we're using this in
a number of different places.

59
00:02:09.02 --> 00:02:12.04
We're using it as the background
of the main body element

60
00:02:12.04 --> 00:02:15.07
in addition to a pattern
which are the dots down here,

61
00:02:15.07 --> 00:02:18.07
we're using it as the
background of the H1 tag

62
00:02:18.07 --> 00:02:20.03
and again if I scroll through here,

63
00:02:20.03 --> 00:02:23.08
you'll see this being used in
a number of different places.

64
00:02:23.08 --> 00:02:24.09
So the first thing we're going to do is

65
00:02:24.09 --> 00:02:26.09
come up to the top and what I want to do

66
00:02:26.09 --> 00:02:28.09
is I want to set the background color

67
00:02:28.09 --> 00:02:31.02
which is defined here in the body selector

68
00:02:31.02 --> 00:02:34.07
to be a little bit darker
than the main color.

69
00:02:34.07 --> 00:02:36.07
So here, the background
color behind the dots,

70
00:02:36.07 --> 00:02:38.07
is the same as the color behind each one

71
00:02:38.07 --> 00:02:41.06
and everywhere else that
this particular variable's

72
00:02:41.06 --> 00:02:43.00
being used.

73
00:02:43.00 --> 00:02:44.04
So what we can do is get our cursor

74
00:02:44.04 --> 00:02:47.00
before the dollar sign.

75
00:02:47.00 --> 00:02:51.04
Let's type in the word,
Darken beginning parenthesis

76
00:02:51.04 --> 00:02:54.07
and then after the variable
name, we'll add an ending,

77
00:02:54.07 --> 00:02:57.03
a parenthesis, then inside,

78
00:02:57.03 --> 00:03:00.01
we're going to put a comma
after the variable name,

79
00:03:00.01 --> 00:03:03.05
and then we're going to type 10%.

80
00:03:03.05 --> 00:03:05.09
Let's hit Save.

81
00:03:05.09 --> 00:03:08.06
My particular compiling software
will give me notification

82
00:03:08.06 --> 00:03:13.01
letting me know that it has
complied this into style.css.

83
00:03:13.01 --> 00:03:16.00
Then I go over to the
browser and I can hit Reload.

84
00:03:16.00 --> 00:03:18.03
Now, we'll see at the
bottom, the background color

85
00:03:18.03 --> 00:03:21.07
of the body element is now
10% darker than the color

86
00:03:21.07 --> 00:03:23.08
we specified everywhere else.

87
00:03:23.08 --> 00:03:26.09
So SASS is making the calculation
and darkening that color

88
00:03:26.09 --> 00:03:30.04
automatically based on the
hex value that we put in here

89
00:03:30.04 --> 00:03:33.04
for the value of that variable.

90
00:03:33.04 --> 00:03:34.06
So now that adjustment made,

91
00:03:34.06 --> 00:03:35.08
I'd like to make the same adjustment

92
00:03:35.08 --> 00:03:39.00
to the background color of the H1.

93
00:03:39.00 --> 00:03:42.07
So scroll down here a little bit.

94
00:03:42.07 --> 00:03:45.09
Let's come up here and copy that function.

95
00:03:45.09 --> 00:03:47.06
Let's come down here to background color

96
00:03:47.06 --> 00:03:49.07
inside of the H1 selector.

97
00:03:49.07 --> 00:03:51.06
Let's paste that.

98
00:03:51.06 --> 00:03:53.08
Again I'll hit Save.

99
00:03:53.08 --> 00:03:56.00
Over to my browser, hit Reload.

100
00:03:56.00 --> 00:03:57.09
Now the background of the H1 tag

101
00:03:57.09 --> 00:04:03.03
is just as dark as the
background color of the body.

102
00:04:03.03 --> 00:04:05.09
Let's keep scrolling down.

103
00:04:05.09 --> 00:04:07.01
We're going to come
down to the bottom here.

104
00:04:07.01 --> 00:04:11.04
I want to find the two
class selectors for bar.

105
00:04:11.04 --> 00:04:13.04
Now down here, I wanted the
colors to be a little bit

106
00:04:13.04 --> 00:04:15.08
different, so what I did is
I actually picked hex values

107
00:04:15.08 --> 00:04:18.04
in a graphics program
to get the lighter blue

108
00:04:18.04 --> 00:04:20.03
and darker blue.

109
00:04:20.03 --> 00:04:21.04
But instead of doing this

110
00:04:21.04 --> 00:04:24.09
when I'd rather do is use the
darken and lighten feature.

111
00:04:24.09 --> 00:04:29.02
So for the .bar let's come in
here and let's paste in our

112
00:04:29.02 --> 00:04:32.04
darkened color and let's
set the darkened value

113
00:04:32.04 --> 00:04:34.09
to just 5%.

114
00:04:34.09 --> 00:04:36.04
And I'll come down here
to the background color

115
00:04:36.04 --> 00:04:40.07
for the div that's inside
of the class of bar.

116
00:04:40.07 --> 00:04:42.09
Let's paste our darkened function here.

117
00:04:42.09 --> 00:04:48.01
Let's change Darken to Lighten.

118
00:04:48.01 --> 00:04:51.05
And for the color, we're
going to leave this at 10%.

119
00:04:51.05 --> 00:04:54.03
So with these in place, we'll hit Save.

120
00:04:54.03 --> 00:04:55.06
Come back to the browser,

121
00:04:55.06 --> 00:04:57.04
We'll hit Reload.

122
00:04:57.04 --> 00:04:59.00
And now we have our new
colors being generated

123
00:04:59.00 --> 00:05:01.07
from that main variable.

124
00:05:01.07 --> 00:05:03.09
And now that we've made a
few adjustments to our color,

125
00:05:03.09 --> 00:05:05.05
now we'll create a new color

126
00:05:05.05 --> 00:05:07.03
by adjusting the original color

127
00:05:07.03 --> 00:05:09.08
using the adjust hue function in SASS.

128
00:05:09.08 --> 00:05:11.07
And later we'll do the same thing in LESS

129
00:05:11.07 --> 00:05:13.05
with the spin function.

130
00:05:13.05 --> 00:05:15.00
Now when using the color adjustments,

131
00:05:15.00 --> 00:05:16.08
we may first think of colors
in the order that we're

132
00:05:16.08 --> 00:05:18.04
used to seeing them on paper,

133
00:05:18.04 --> 00:05:20.03
which is in the CMYK model.

134
00:05:20.03 --> 00:05:22.05
However, we do need to
remember, that the color model

135
00:05:22.05 --> 00:05:24.07
for emitted light is RGB.

136
00:05:24.07 --> 00:05:27.03
So adjustments we make
are based on this model.

137
00:05:27.03 --> 00:05:28.06
So the opposite of violet,

138
00:05:28.06 --> 00:05:30.08
the 180 degree hue adjustment

139
00:05:30.08 --> 00:05:33.06
would result in green and not yellow.

140
00:05:33.06 --> 00:05:35.03
So now back in our CSS

141
00:05:35.03 --> 00:05:38.04
let's define another
color and base that color

142
00:05:38.04 --> 00:05:42.04
off of an adjustment from the first color.

143
00:05:42.04 --> 00:05:44.07
So up here at the top under Color One,

144
00:05:44.07 --> 00:05:46.09
let's type a dollar sign.

145
00:05:46.09 --> 00:05:52.04
Let's type color_2: and
we'll set the value of this

146
00:05:52.04 --> 00:05:54.06
to an adjustment of Color One.

147
00:05:54.06 --> 00:06:00.04
So let's come up here and copy
the Color One variable name.

148
00:06:00.04 --> 00:06:03.09
Then after the colon for Color Two,

149
00:06:03.09 --> 00:06:07.01
let's type adjust-hue

150
00:06:07.01 --> 00:06:09.05
put in our parenthesis and semicolon.

151
00:06:09.05 --> 00:06:13.01
Inside, let's paste the Color One variable

152
00:06:13.01 --> 00:06:16.00
then a comma, and then what
I want to do is just adjust

153
00:06:16.00 --> 00:06:17.04
this a little bit.

154
00:06:17.04 --> 00:06:20.03
I'm going to set a 10
degree hue adjustment.

155
00:06:20.03 --> 00:06:23.06
So 10 D-E-G.

156
00:06:23.06 --> 00:06:25.07
And so now with this new
color variable defined,

157
00:06:25.07 --> 00:06:28.04
let's come over here and select and copy,

158
00:06:28.04 --> 00:06:33.00
$color_2, let's come
down to the body element.

159
00:06:33.00 --> 00:06:35.05
Instead of darkening the main color,

160
00:06:35.05 --> 00:06:37.02
let's come in here and replace that simply

161
00:06:37.02 --> 00:06:39.09
with Color Two.

162
00:06:39.09 --> 00:06:41.04
Then let's scroll down.

163
00:06:41.04 --> 00:06:43.03
The other place I want to use this will be

164
00:06:43.03 --> 00:06:45.04
for the div with the class of bar

165
00:06:45.04 --> 00:06:46.09
and then the div inside of that.

166
00:06:46.09 --> 00:06:48.06
So basically, everything that shows

167
00:06:48.06 --> 00:06:52.05
at the bottom of the page I
want to use the adjusted color.

168
00:06:52.05 --> 00:06:55.05
So for the selector.bar

169
00:06:55.05 --> 00:06:58.00
let's come in here and
change this to Color Two

170
00:06:58.00 --> 00:07:00.01
and then the same thing for
the background color of the div

171
00:07:00.01 --> 00:07:02.00
inside of the class of bar.

172
00:07:02.00 --> 00:07:05.02
Set that to color_2 as well.

173
00:07:05.02 --> 00:07:06.02
Then I'll save my file.

174
00:07:06.02 --> 00:07:08.05
Go back to the browser, hit Reload

175
00:07:08.05 --> 00:07:10.00
and now we can see the slight adjustment

176
00:07:10.00 --> 00:07:10.09
showing up down here

177
00:07:10.09 --> 00:07:12.02
for the background of the body

178
00:07:12.02 --> 00:07:15.02
and the two div elements
at the bottom of the page.

179
00:07:15.02 --> 00:07:16.06
So this is a pretty subtle change

180
00:07:16.06 --> 00:07:18.02
but it does give us a slight variation

181
00:07:18.02 --> 00:07:22.00
on the original blue that we define.

182
00:07:22.00 --> 00:07:23.02
So now let's create a second color

183
00:07:23.02 --> 00:07:26.01
that's going to have a
little more of an adjustment.

184
00:07:26.01 --> 00:07:28.04
So after Color Two,

185
00:07:28.04 --> 00:07:33.00
$color_3:

186
00:07:33.00 --> 00:07:35.07
I'll come up here and
copy that adjustment,

187
00:07:35.07 --> 00:07:38.02
paste it on the next line,

188
00:07:38.02 --> 00:07:39.00
and let's come in here

189
00:07:39.00 --> 00:07:44.03
and let's change this
to negative 60 degrees.

190
00:07:44.03 --> 00:07:47.06
We're still going to adjust
the original Color One.

191
00:07:47.06 --> 00:07:48.06
Now to use this color,

192
00:07:48.06 --> 00:07:52.06
let's come in here and copy
the color_3 variable name.

193
00:07:52.06 --> 00:07:53.06
So let's scroll down,

194
00:07:53.06 --> 00:07:58.01
let's find the div that's
inside of the aside.

195
00:07:58.01 --> 00:07:59.06
Here we have a board of color.

196
00:07:59.06 --> 00:08:02.05
The board of color is
being set to Color One.

197
00:08:02.05 --> 00:08:06.00
Let's come in here and
replace that with Color Three.

198
00:08:06.00 --> 00:08:07.01
And then right below this property,

199
00:08:07.01 --> 00:08:08.07
let's change the text color.

200
00:08:08.07 --> 00:08:12.00
So inside Color Two, Color Three.

201
00:08:12.00 --> 00:08:14.09
And we'll come down a
little bit to the H3.

202
00:08:14.09 --> 00:08:16.01
The background color
here, we're going to set

203
00:08:16.01 --> 00:08:18.08
this to Color Three as well.

204
00:08:18.08 --> 00:08:20.05
And then one additional
property I'd like to set

205
00:08:20.05 --> 00:08:22.03
is to set up background color on the div

206
00:08:22.03 --> 00:08:23.08
that's inside of the aside.

207
00:08:23.08 --> 00:08:25.03
So let's come back up here.

208
00:08:25.03 --> 00:08:26.04
I put color.

209
00:08:26.04 --> 00:08:28.01
Let's hit Return.

210
00:08:28.01 --> 00:08:30.07
Let's add background color.

211
00:08:30.07 --> 00:08:31.08
So what we can do in SASS

212
00:08:31.08 --> 00:08:34.02
is use the RGBA color space.

213
00:08:34.02 --> 00:08:35.08
So I can type RGBA,

214
00:08:35.08 --> 00:08:38.02
put in our parenthesis
and then a semicolon.

215
00:08:38.02 --> 00:08:40.06
Inside, let's paste Color Three

216
00:08:40.06 --> 00:08:43.07
and a comma, and now I
can put in alpha setting.

217
00:08:43.07 --> 00:08:46.00
So I'm simply going to put .1

218
00:08:46.00 --> 00:08:49.02
and that's going to give me
a 10% version of Color Three.

219
00:08:49.02 --> 00:08:51.09
So with these in place we'll hit Save.

220
00:08:51.09 --> 00:08:52.09
And then over here in the browser,

221
00:08:52.09 --> 00:08:54.00
we can see the result of making

222
00:08:54.00 --> 00:08:56.03
a negative 60 degree hue adjustment

223
00:08:56.03 --> 00:08:59.07
for the Color One variable.

224
00:08:59.07 --> 00:09:01.04
So now with these color variables set up

225
00:09:01.04 --> 00:09:03.00
and all of our adjustments in place,

226
00:09:03.00 --> 00:09:07.02
we can now make global changes
to our color from one spot.

227
00:09:07.02 --> 00:09:09.02
So in the CSS file, let's scroll up.

228
00:09:09.02 --> 00:09:12.06
Let's find the definition
for the Color One variable

229
00:09:12.06 --> 00:09:13.06
and let's come in here and change this

230
00:09:13.06 --> 00:09:16.00
from a blue to a violet color.

231
00:09:16.00 --> 00:09:18.05
So let's change the red value to 79.

232
00:09:18.05 --> 00:09:22.01
Let's change the green value to 3C

233
00:09:22.01 --> 00:09:24.06
and the blue value to A0.

234
00:09:24.06 --> 00:09:26.01
Well hit Save.

235
00:09:26.01 --> 00:09:27.00
Back to the browser.

236
00:09:27.00 --> 00:09:28.04
We'll hit Reload.

237
00:09:28.04 --> 00:09:30.00
And now we can see all of the
new colors being generated

238
00:09:30.00 --> 00:09:33.07
based off of modifying that one variable.

239
00:09:33.07 --> 00:09:35.09
So now we're ready to
convert our SASS file

240
00:09:35.09 --> 00:09:37.07
into a LESS file.

241
00:09:37.07 --> 00:09:39.08
So let's come over here to our SASS file.

242
00:09:39.08 --> 00:09:42.00
Let's do a Select All.

243
00:09:42.00 --> 00:09:45.07
Let's choose Copy, to copy
this to the clipboard.

244
00:09:45.07 --> 00:09:47.06
Switch back to the exercise files.

245
00:09:47.06 --> 00:09:49.09
Let's find style.less.

246
00:09:49.09 --> 00:09:52.07
Let's open this in our Text Editor.

247
00:09:52.07 --> 00:09:54.04
And I left this blank.

248
00:09:54.04 --> 00:09:57.04
So let's come in here
and delete the comment.

249
00:09:57.04 --> 00:10:01.08
Let's paste in all of our SCSS code.

250
00:10:01.08 --> 00:10:03.06
Let's scroll to the top.

251
00:10:03.06 --> 00:10:05.00
And I'll use my Text Editors

252
00:10:05.00 --> 00:10:06.04
Search and Replace field

253
00:10:06.04 --> 00:10:08.04
to replace our variables.

254
00:10:08.04 --> 00:10:10.03
So first let's come in here and select.

255
00:10:10.03 --> 00:10:14.00
$color_

256
00:10:14.00 --> 00:10:16.09
I'm going to put that into my Find field,

257
00:10:16.09 --> 00:10:19.05
into my Replace field.

258
00:10:19.05 --> 00:10:21.02
Going to paste that again
and I'm going to change

259
00:10:21.02 --> 00:10:24.02
the dollar sign for an At symbol.

260
00:10:24.02 --> 00:10:26.03
And then I'll replace
all of those instances

261
00:10:26.03 --> 00:10:27.05
so that all of the variables

262
00:10:27.05 --> 00:10:30.01
are now following the LESS syntax.

263
00:10:30.01 --> 00:10:32.05
Now there's a few other
adjustments I need to make.

264
00:10:32.05 --> 00:10:35.09
The first one, for Color Two and Three,

265
00:10:35.09 --> 00:10:38.09
LESS does not use the
function name adjust-hue.

266
00:10:38.09 --> 00:10:42.02
It uses the word Spin instead.

267
00:10:42.02 --> 00:10:45.09
So let's change these to Spin.

268
00:10:45.09 --> 00:10:47.05
And let's scroll down to find the div

269
00:10:47.05 --> 00:10:49.06
inside of the aside.

270
00:10:49.06 --> 00:10:52.02
LESS does not allow us to
use the RGBA color space

271
00:10:52.02 --> 00:10:54.01
to make an adjustment here.

272
00:10:54.01 --> 00:10:58.05
So instead of RGBA, we're
going to type in the word Fade,

273
00:10:58.05 --> 00:11:02.09
and then we're going to
change the .1 to 10%.

274
00:11:02.09 --> 00:11:05.00
This will essentially do
the same thing as SASS

275
00:11:05.00 --> 00:11:07.09
but again, the syntax
is a little different.

276
00:11:07.09 --> 00:11:08.09
And then before I save this,

277
00:11:08.09 --> 00:11:10.08
let's change the over all color again

278
00:11:10.08 --> 00:11:13.06
just to make sure the LESS
file is compiling properly.

279
00:11:13.06 --> 00:11:16.06
Let's come up to Color One.

280
00:11:16.06 --> 00:11:20.01
And let's change this to 90 for red,

281
00:11:20.01 --> 00:11:25.00
60 for green, and 31 for blue.

282
00:11:25.00 --> 00:11:28.02
With that in place, let's hit Save.

283
00:11:28.02 --> 00:11:30.00
Check to make sure your LESS file

284
00:11:30.00 --> 00:11:33.07
got properly complied down into style.css.

285
00:11:33.07 --> 00:11:34.07
Come back to the browser

286
00:11:34.07 --> 00:11:37.05
and then hit Reload.

287
00:11:37.05 --> 00:11:39.03
So we've now used a SASS and LESS

288
00:11:39.03 --> 00:11:41.07
to create color variations
from a single color

289
00:11:41.07 --> 00:11:43.06
defined in the variable.

290
00:11:43.06 --> 00:11:44.08
Using these adjustment techniques,

291
00:11:44.08 --> 00:11:47.02
you'll be able to create
an entire range of colors

292
00:11:47.02 --> 00:11:49.04
for your website based on any color rules

293
00:11:49.04 --> 00:11:51.04
you need to adhere to.

294
00:11:51.04 --> 00:11:52.07
Now if you'd like to learn more

295
00:11:52.07 --> 00:11:54.00
about SASS and LESS,

296
00:11:54.00 --> 00:11:56.05
I'd recommend taking Joe
Marini's course entitled

297
00:11:56.05 --> 00:11:59.02
CSS with LESS and SASS
which is available here

298
00:11:59.02 --> 00:12:00.05
in the library.

299
00:12:00.05 --> 00:12:02.06
And so with that, I'll
conclude this episode

300
00:12:02.06 --> 00:12:05.05
and as always, thanks for watching.