1
00:00:00.09 --> 00:00:02.07
- [Instructor] Hi, this is Chris Converse

2
00:00:02.07 --> 00:00:03.09
and in this episode we'll take a look

3
00:00:03.09 --> 00:00:07.00
at creating our own mixin in SASS.

4
00:00:07.00 --> 00:00:09.03
Mixins work a lot like
functions in languages like

5
00:00:09.03 --> 00:00:11.08
JavaScript and PHP and many others.

6
00:00:11.08 --> 00:00:14.02
They allow us to define
some CSS properties,

7
00:00:14.02 --> 00:00:16.04
and then reuse those
properties for any number

8
00:00:16.04 --> 00:00:18.09
of other CSS rules in our document.

9
00:00:18.09 --> 00:00:20.05
Now, if you'd like to
follow along with me,

10
00:00:20.05 --> 00:00:22.03
download the exercise files and make sure

11
00:00:22.03 --> 00:00:24.02
to have to have a compiling
tool running as well.

12
00:00:24.02 --> 00:00:28.09
So your SASS file will
be converted into CSS.

13
00:00:28.09 --> 00:00:30.07
Now once you extract the exercise files,

14
00:00:30.07 --> 00:00:34.08
you'll find a style.scss
file, this is our SASS file.

15
00:00:34.08 --> 00:00:38.03
This file will get
compiled into style.CSS,

16
00:00:38.03 --> 00:00:40.03
this is the file that the browser needs.

17
00:00:40.03 --> 00:00:42.02
There's an index.hmtl file,

18
00:00:42.02 --> 00:00:44.06
an images directory with a banner graphic,

19
00:00:44.06 --> 00:00:47.08
and in my particular case,
I have a codekit file here.

20
00:00:47.08 --> 00:00:50.06
Codekit is the compiling
software that I'll be using,

21
00:00:50.06 --> 00:00:52.07
but you can use any compiling
software that you have

22
00:00:52.07 --> 00:00:55.02
that can convert SASS into CSS.

23
00:00:55.02 --> 00:00:58.06
So, your particular files will
not have this Codekit file.

24
00:00:58.06 --> 00:00:59.07
So, to begin our project,

25
00:00:59.07 --> 00:01:03.05
let's open index.html in a text editor.

26
00:01:03.05 --> 00:01:05.08
Once you have the html file
open, up in the head area,

27
00:01:05.08 --> 00:01:10.07
you'll see we have the
link to the style.css file.

28
00:01:10.07 --> 00:01:12.08
If I scroll down here,
inside of the body element

29
00:01:12.08 --> 00:01:15.02
we have a header element
and a main element.

30
00:01:15.02 --> 00:01:16.03
Inside of the main element

31
00:01:16.03 --> 00:01:19.03
we have an article element and an aside.

32
00:01:19.03 --> 00:01:22.00
And inside of each of the
article and aside elements

33
00:01:22.00 --> 00:01:25.04
we have some anchor links
with the class of btn.

34
00:01:25.04 --> 00:01:27.02
In an earlier episode,
we took anchor links

35
00:01:27.02 --> 00:01:30.02
and converted them into buttons using CSS.

36
00:01:30.02 --> 00:01:31.09
So what we're going to
be doing in this episode

37
00:01:31.09 --> 00:01:33.09
is sharing some properties
between the buttons

38
00:01:33.09 --> 00:01:35.08
that are inside of the article element

39
00:01:35.08 --> 00:01:38.07
and the button that's
inside of the aside element.

40
00:01:38.07 --> 00:01:39.08
And if you'd like to preview the layout

41
00:01:39.08 --> 00:01:40.08
we're going to be working with,

42
00:01:40.08 --> 00:01:43.09
you can open index.html in a browser.

43
00:01:43.09 --> 00:01:46.06
Once this is open, we can see
those buttons showing up here.

44
00:01:46.06 --> 00:01:49.05
So we have one after nutrition,
one after preparation,

45
00:01:49.05 --> 00:01:52.08
and one over here after
organic in the aside.

46
00:01:52.08 --> 00:01:54.05
So to begin creating our own mixin,

47
00:01:54.05 --> 00:01:57.01
let's go back to the exercise files,

48
00:01:57.01 --> 00:02:01.01
let's open style.scss
up in our text editor.

49
00:02:01.01 --> 00:02:04.05
Now I'm using the Sassy
CSS syntax of SASS,

50
00:02:04.05 --> 00:02:07.07
so it looks a lot like regular CSS.

51
00:02:07.07 --> 00:02:09.07
Let's scroll down to the bottom here.

52
00:02:09.07 --> 00:02:12.09
Let's find the anchor tag
with the class of btn,

53
00:02:12.09 --> 00:02:15.00
and what I want to do is reuse all

54
00:02:15.00 --> 00:02:17.04
of these properties in a mixin.

55
00:02:17.04 --> 00:02:21.03
So let's come down here and
select all of these properties.

56
00:02:21.03 --> 00:02:26.01
Let's choose edit, and then
cut these to the clipboard.

57
00:02:26.01 --> 00:02:27.07
I'm gunna come in here
and just delete that rule,

58
00:02:27.07 --> 00:02:29.08
and lets start by creating a SASS mixin.

59
00:02:29.08 --> 00:02:33.03
And we do that by typing an at symbol,

60
00:02:33.03 --> 00:02:36.03
typing in the word mixin, then a space,

61
00:02:36.03 --> 00:02:39.01
then we're going to give our mixin a name.

62
00:02:39.01 --> 00:02:43.05
We're going to call this button_normal.

63
00:02:43.05 --> 00:02:46.01
Then we're going to add a
beginning and ending parentheses,

64
00:02:46.01 --> 00:02:49.03
then a space, then a
beginning and ending bracket.

65
00:02:49.03 --> 00:02:51.00
So again, if you're
familiar with JavaScript,

66
00:02:51.00 --> 00:02:52.05
or other similar languages,

67
00:02:52.05 --> 00:02:55.07
this will look exactly like a
function in those languages.

68
00:02:55.07 --> 00:02:56.07
So now, inside of these brackets,

69
00:02:56.07 --> 00:02:59.01
I'm going to come in here and
paste all of those properties

70
00:02:59.01 --> 00:03:03.00
that we originally had
in the a.btn selector.

71
00:03:03.00 --> 00:03:05.02
So with these in place I'll hit save.

72
00:03:05.02 --> 00:03:07.04
Now if I go back to the
browser and hit reload,

73
00:03:07.04 --> 00:03:09.06
all of those properties that
converted our anchor links

74
00:03:09.06 --> 00:03:12.01
into buttons are no longer
being applied to our layout.

75
00:03:12.01 --> 00:03:14.03
So we just see standard anchor links here.

76
00:03:14.03 --> 00:03:16.02
So now what we need to do back in our CSS,

77
00:03:16.02 --> 00:03:21.01
is apply this mixin to some CSS rules.

78
00:03:21.01 --> 00:03:23.03
So after the mixin,
let's hit a few returns,

79
00:03:23.03 --> 00:03:26.02
and let's first target the
anchor links with a class of btn

80
00:03:26.02 --> 00:03:28.01
inside of the article element.

81
00:03:28.01 --> 00:03:32.00
So I'll type article space a.btn,

82
00:03:32.00 --> 00:03:35.01
then a space, put in our brackets.

83
00:03:35.01 --> 00:03:38.00
Let's split this open
and now to use the mixin,

84
00:03:38.00 --> 00:03:41.06
what we need to do is use an at symbol,

85
00:03:41.06 --> 00:03:44.03
type in the world include, then a space,

86
00:03:44.03 --> 00:03:47.05
then we need to reference the mixin name.

87
00:03:47.05 --> 00:03:51.02
So let's come up here
and select button_normal.

88
00:03:51.02 --> 00:03:54.09
I'll copy that, come
down here and paste it.

89
00:03:54.09 --> 00:03:57.02
Let's put in our beginning
and ending parentheses,

90
00:03:57.02 --> 00:03:58.09
then a semicolon.

91
00:03:58.09 --> 00:04:02.08
So, with that in place,
let's copy that entire rule.

92
00:04:02.08 --> 00:04:06.04
Let's hit a few returns,
let's paste it down here.

93
00:04:06.04 --> 00:04:09.03
Let's change article to aside,

94
00:04:09.03 --> 00:04:12.07
and we'll still reference
the same button_normal.

95
00:04:12.07 --> 00:04:14.06
So at this point, let's hit save.

96
00:04:14.06 --> 00:04:18.00
Our SCSS file will be compiled into CSS.

97
00:04:18.00 --> 00:04:19.09
Go back to the browser, we'll hit reload,

98
00:04:19.09 --> 00:04:22.09
and now we can see the
styles that we had before.

99
00:04:22.09 --> 00:04:24.08
What's happening here is
all of the rules inside

100
00:04:24.08 --> 00:04:28.05
of the button_normal
mixin are being applied

101
00:04:28.05 --> 00:04:34.05
to article a.btn and aside a.btn.

102
00:04:34.05 --> 00:04:36.04
So now that our mixin is working properly,

103
00:04:36.04 --> 00:04:38.05
what I want to do now is customize some

104
00:04:38.05 --> 00:04:40.06
of the properties when we call the mixin.

105
00:04:40.06 --> 00:04:43.06
So the styling in the article
area can be a little different

106
00:04:43.06 --> 00:04:45.09
from the styling in the aside.

107
00:04:45.09 --> 00:04:46.09
So to do that we're going to add

108
00:04:46.09 --> 00:04:50.04
some parameters to our mixin.

109
00:04:50.04 --> 00:04:52.05
So let's come up here to our mixin,

110
00:04:52.05 --> 00:04:54.00
inside of the parentheses.

111
00:04:54.00 --> 00:04:55.09
So I want to send three properties,

112
00:04:55.09 --> 00:04:57.07
something so we can change
the color of the text,

113
00:04:57.07 --> 00:05:01.07
the color of the background,
and the color of the border.

114
00:05:01.07 --> 00:05:05.00
So using SASS variable, which
start with a dollar sign,

115
00:05:05.00 --> 00:05:08.06
we're going to type a dollar
sign, type in the word text,

116
00:05:08.06 --> 00:05:12.09
then a comma, dollar sign background,

117
00:05:12.09 --> 00:05:16.01
then a comma, then dollar sign border.

118
00:05:16.01 --> 00:05:18.06
Now, you can choose any name
you want for these variables,

119
00:05:18.06 --> 00:05:21.05
but I'll just keep these as
text, background, and border.

120
00:05:21.05 --> 00:05:23.07
So now inside of the mixin,
I'm going to add a property

121
00:05:23.07 --> 00:05:28.06
at the top called color
for the text color.

122
00:05:28.06 --> 00:05:30.09
Put in colon, then a space,

123
00:05:30.09 --> 00:05:35.01
then I'll come up here and
copy the text variable,

124
00:05:35.01 --> 00:05:40.00
we'll paste that after the
colon, then hit a semicolon.

125
00:05:40.00 --> 00:05:43.08
Next lets come up here and
select the background variable.

126
00:05:43.08 --> 00:05:46.03
Let's come down here to the
background color property,

127
00:05:46.03 --> 00:05:48.06
let's replace the pound sign and three Fs

128
00:05:48.06 --> 00:05:50.08
with the background variable.

129
00:05:50.08 --> 00:05:52.01
And then finally, we'll come up here,

130
00:05:52.01 --> 00:05:54.06
select the border variable,

131
00:05:54.06 --> 00:05:57.08
and we'll replace the three
Fs in the border property

132
00:05:57.08 --> 00:06:00.01
with that variable as well.

133
00:06:00.01 --> 00:06:01.03
So now that our mixin is ready

134
00:06:01.03 --> 00:06:03.09
to get custom properties when we call it,

135
00:06:03.09 --> 00:06:07.00
let's come down here to
the article space a.btn

136
00:06:07.00 --> 00:06:09.08
and let's send in those
particular properties.

137
00:06:09.08 --> 00:06:13.00
So for the text color of
buttons inside of the article,

138
00:06:13.00 --> 00:06:14.09
let's type a pound sign and three Fs,

139
00:06:14.09 --> 00:06:17.03
so the color will be white, then a comma,

140
00:06:17.03 --> 00:06:19.01
now we'll set the background color.

141
00:06:19.01 --> 00:06:20.09
So that's going to be a pound sign,

142
00:06:20.09 --> 00:06:25.03
BC for red, C4 for green, and 28 for blue,

143
00:06:25.03 --> 00:06:29.01
then a comma and we'll use
the same color for the border.

144
00:06:29.01 --> 00:06:31.00
Let's come in here and copy that,

145
00:06:31.00 --> 00:06:33.00
and then paste it after the comma.

146
00:06:33.00 --> 00:06:35.00
So these three values will be sent along

147
00:06:35.00 --> 00:06:38.02
when we call the button_normal mixin.

148
00:06:38.02 --> 00:06:39.09
And so now let's come
down here to the aside,

149
00:06:39.09 --> 00:06:41.05
it's space a.btn, and let's send

150
00:06:41.05 --> 00:06:43.08
three properties down here as well.

151
00:06:43.08 --> 00:06:46.07
So, for the text color, we're
going to set pound sign,

152
00:06:46.07 --> 00:06:51.07
72 for red, B0 for green, and 03 for blue,

153
00:06:51.07 --> 00:06:55.00
then a comma, then a
pound sign and threes Fs,

154
00:06:55.00 --> 00:06:58.00
for white for the background
color, then a comma,

155
00:06:58.00 --> 00:07:01.05
then a pound sign and three
Fs for the border color.

156
00:07:01.05 --> 00:07:04.06
So now with these in
place, let's save our file.

157
00:07:04.06 --> 00:07:07.04
Now let's go back to the
browser, let's hit reload,

158
00:07:07.04 --> 00:07:09.07
and we'll now see that the
buttons in the article element

159
00:07:09.07 --> 00:07:11.05
are styled just a little bit differently

160
00:07:11.05 --> 00:07:13.04
than the button inside of the aside.

161
00:07:13.04 --> 00:07:15.05
However, they do share the
common properties such as

162
00:07:15.05 --> 00:07:19.06
the display type, the padding,
the border radius, and so on.

163
00:07:19.06 --> 00:07:21.07
So now that we have some
customized properties,

164
00:07:21.07 --> 00:07:23.02
let's go back to our SASS file

165
00:07:23.02 --> 00:07:27.01
and let's create a second
mixin for the hover states.

166
00:07:27.01 --> 00:07:35.08
So type and at symbol mixin
space, type in button_hover,

167
00:07:35.08 --> 00:07:39.01
put in our parentheses,
put in our brackets.

168
00:07:39.01 --> 00:07:40.07
Let's split this open.

169
00:07:40.07 --> 00:07:42.01
The parameters for the hover state

170
00:07:42.01 --> 00:07:44.05
are just going to be text and background.

171
00:07:44.05 --> 00:07:47.03
So I'm going to come up here
and select those two variables

172
00:07:47.03 --> 00:07:52.09
from the button_normal mixin,
let's paste them down here.

173
00:07:52.09 --> 00:07:57.09
Inside of BTN hover, let's
add a property of color,

174
00:07:57.09 --> 00:08:04.06
we're going to set that
to our text variable.

175
00:08:04.06 --> 00:08:06.09
And then the next line, we're
going to set background color

176
00:08:06.09 --> 00:08:10.04
and we're going to set that
to our background variable.

177
00:08:10.04 --> 00:08:11.05
So these are the two properties

178
00:08:11.05 --> 00:08:13.06
we're going to use for the hover states.

179
00:08:13.06 --> 00:08:15.02
Now, to apply the hover
state to our rules,

180
00:08:15.02 --> 00:08:17.05
we're going to use nesting,
which is part of SASS.

181
00:08:17.05 --> 00:08:20.06
And we covered this in an
earlier episode as well.

182
00:08:20.06 --> 00:08:27.05
So let's find article space
a.btn, let's hit a return.

183
00:08:27.05 --> 00:08:29.01
We'll add some extra lines here.

184
00:08:29.01 --> 00:08:32.04
Now for the nesting,
we're going to use an &,

185
00:08:32.04 --> 00:08:37.04
then we're going to use
colon hover and a space.

186
00:08:37.04 --> 00:08:39.08
Put in our brackets,
and then inside of here

187
00:08:39.08 --> 00:08:42.07
we're going to call
the button hover mixin.

188
00:08:42.07 --> 00:08:50.05
So we'll type at symbol
include space button_hover,

189
00:08:50.05 --> 00:08:53.01
put in our parentheses, semicolon.

190
00:08:53.01 --> 00:08:55.03
And then inside of the
parentheses, for the text color,

191
00:08:55.03 --> 00:08:59.07
we're going to send black, so
that's pound sign three zeros.

192
00:08:59.07 --> 00:09:01.01
And then for the background color

193
00:09:01.01 --> 00:09:02.03
we're going to change it to white,

194
00:09:02.03 --> 00:09:05.05
so put a pound sign and three Fs.

195
00:09:05.05 --> 00:09:08.02
Let's come up here and select
this nested hover rule.

196
00:09:08.02 --> 00:09:11.00
Let's come down here to
the aside space a.btn,

197
00:09:11.00 --> 00:09:13.07
after we call the button
normal mixin in here.

198
00:09:13.07 --> 00:09:16.01
Let's paste in this hover selector.

199
00:09:16.01 --> 00:09:19.03
And then for the
parameters of button_hover,

200
00:09:19.03 --> 00:09:22.03
let's come in here and
change black to white,

201
00:09:22.03 --> 00:09:25.02
so that's pound sign and three Fs.

202
00:09:25.02 --> 00:09:27.01
And for the background
color, in the aside,

203
00:09:27.01 --> 00:09:29.03
I want to use a semi-transparent color.

204
00:09:29.03 --> 00:09:31.02
So instead of a hash symbol,

205
00:09:31.02 --> 00:09:33.04
we're going to type rgba

206
00:09:33.04 --> 00:09:34.03
then we're going to put our beginning

207
00:09:34.03 --> 00:09:37.05
and ending parentheses for the rgba,

208
00:09:37.05 --> 00:09:38.06
and then inside of the parentheses

209
00:09:38.06 --> 00:09:41.09
we're going to set 255 for
red, comma 255 for green,

210
00:09:41.09 --> 00:09:45.00
comma 255 for blue, then a comma,

211
00:09:45.00 --> 00:09:47.04
and then we're going to put
point three for the alpha.

212
00:09:47.04 --> 00:09:49.07
So we'll get a semitransparent
white background color

213
00:09:49.07 --> 00:09:53.04
on hover for the button
inside of the aside.

214
00:09:53.04 --> 00:09:55.04
So with that in place, we'll hit save.

215
00:09:55.04 --> 00:09:57.08
Let's go back to the
browser, we'll hit reload,

216
00:09:57.08 --> 00:09:59.07
and now we can hover over
each one of these buttons

217
00:09:59.07 --> 00:10:02.07
and we'll get a slightly different
style for the hover state

218
00:10:02.07 --> 00:10:04.02
just like we have a
slightly different style

219
00:10:04.02 --> 00:10:06.03
for the normal state.

220
00:10:06.03 --> 00:10:07.08
And then one last feature I'd like to add

221
00:10:07.08 --> 00:10:10.05
is to add a pseudo-element
to each one of the buttons

222
00:10:10.05 --> 00:10:13.00
to add a right facing arrow.

223
00:10:13.00 --> 00:10:15.03
And we can use the nesting
technique that we just used

224
00:10:15.03 --> 00:10:19.01
for the hover states in
the main mixin as well.

225
00:10:19.01 --> 00:10:22.07
So back in our SASS file,
after background color,

226
00:10:22.07 --> 00:10:24.04
I'll hit a few returns.

227
00:10:24.04 --> 00:10:28.01
Again, we'll use an & to
create a nested style.

228
00:10:28.01 --> 00:10:30.05
Then we're going to use two colons,

229
00:10:30.05 --> 00:10:33.07
type in the word after to
create a pseudo-element.

230
00:10:33.07 --> 00:10:37.00
Put in our brackets, split this open,

231
00:10:37.00 --> 00:10:38.06
and then inside of this pseudo-element

232
00:10:38.06 --> 00:10:42.02
we'll start with a content property.

233
00:10:42.02 --> 00:10:44.07
Set this to two ticks and a semicolon,

234
00:10:44.07 --> 00:10:46.06
and inside we'll use a unicode character

235
00:10:46.06 --> 00:10:48.05
for a right facing arrow.

236
00:10:48.05 --> 00:10:55.04
So we'll start with a
backslash, type 25ba.

237
00:10:55.04 --> 00:10:57.09
Next property we're
going to set font size,

238
00:10:57.09 --> 00:11:02.02
we're going to set this to point eight Ms.

239
00:11:02.02 --> 00:11:04.01
Next property is going to be padding left,

240
00:11:04.01 --> 00:11:07.02
we're going to set this to six pixels.

241
00:11:07.02 --> 00:11:09.08
And then finally, we're
going to set the opacity,

242
00:11:09.08 --> 00:11:13.02
we're going to set that to point six five.

243
00:11:13.02 --> 00:11:15.08
So, with these in place,
let's hit save again.

244
00:11:15.08 --> 00:11:18.03
Let's go back to the
browser, let's hit reload.

245
00:11:18.03 --> 00:11:19.09
And now we'll see that all of the buttons

246
00:11:19.09 --> 00:11:22.06
now have a pseudo-element
with this right facing arrow

247
00:11:22.06 --> 00:11:25.03
applied to not only the
buttons inside of the article,

248
00:11:25.03 --> 00:11:27.09
but the aside as well.

249
00:11:27.09 --> 00:11:29.01
And if you'd like to see what's happening

250
00:11:29.01 --> 00:11:30.08
in the final compiled CSS,

251
00:11:30.08 --> 00:11:34.07
let's go back to the exercise
files, let's open style.CSS,

252
00:11:34.07 --> 00:11:36.03
let's scroll down to the bottom,

253
00:11:36.03 --> 00:11:38.04
and you can see the result
of all of the properties

254
00:11:38.04 --> 00:11:41.02
being assigned to the a.btn,

255
00:11:41.02 --> 00:11:43.09
both inside of the article
and aside elements,

256
00:11:43.09 --> 00:11:47.00
by referencing the mixin in our SASS file.

257
00:11:47.00 --> 00:11:49.07
Now, if you'd like to learn
more about using SASS, or LESS,

258
00:11:49.07 --> 00:11:52.04
I'd recommend taking a
look at Joe Marini's course

259
00:11:52.04 --> 00:11:54.08
entitled, "CSS with LESS and SASS"

260
00:11:54.08 --> 00:11:57.02
which is also available
here in the library.

261
00:11:57.02 --> 00:11:59.03
And so with that, I'll
conclude this episode,

262
00:11:59.03 --> 00:12:02.02
and as always, thanks for watching.