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

2
00:00:02.02 --> 00:00:03.07
and in this episode we'll take a look at

3
00:00:03.07 --> 00:00:06.04
creating our own mixin in LESS.

4
00:00:06.04 --> 00:00:08.07
Mixins work a lot like
functions in other languages

5
00:00:08.07 --> 00:00:11.03
like JavaScript and PHP, and many others.

6
00:00:11.03 --> 00:00:13.03
They allow us to define
some CSS properties

7
00:00:13.03 --> 00:00:15.05
and reuse and customize those properties

8
00:00:15.05 --> 00:00:18.06
for any number of other
CSS rules in our document.

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

10
00:00:20.04 --> 00:00:21.09
download the exercise files,

11
00:00:21.09 --> 00:00:24.05
and make sure to have the
compiling tool running as well.

12
00:00:24.05 --> 00:00:28.04
So your LESS file will
be converted into CSS.

13
00:00:28.04 --> 00:00:30.02
And once you've extracted
the exercise files,

14
00:00:30.02 --> 00:00:32.09
you'll see a style.less file.

15
00:00:32.09 --> 00:00:35.03
You'll also see a style.css file.

16
00:00:35.03 --> 00:00:37.00
It's this style, that CSS file,

17
00:00:37.00 --> 00:00:39.08
that the LESS file will be compiled into.

18
00:00:39.08 --> 00:00:42.00
There's an index.html file.

19
00:00:42.00 --> 00:00:44.09
An images folder with
a banner.jpg graphic.

20
00:00:44.09 --> 00:00:47.09
And in my particular case,
I have a code kit file.

21
00:00:47.09 --> 00:00:49.06
Code kit is the compiling software

22
00:00:49.06 --> 00:00:52.07
that I'll be using to convert
my LESS files into CSS.

23
00:00:52.07 --> 00:00:55.07
So you will not have this
file in your exercise files.

24
00:00:55.07 --> 00:00:56.08
So to begin our project,

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

26
00:01:00.04 --> 00:01:02.08
Now inside of the HTML
file, in the head area,

27
00:01:02.08 --> 00:01:05.07
we have a link to the style.css file.

28
00:01:05.07 --> 00:01:09.07
Again, this is the compiled
file from the LESS document.

29
00:01:09.07 --> 00:01:12.01
If I scroll down, inside
of the body element

30
00:01:12.01 --> 00:01:14.08
we have a header element
and a main element.

31
00:01:14.08 --> 00:01:18.09
Inside of the main element,
we have an article element.

32
00:01:18.09 --> 00:01:20.05
And an aside element.

33
00:01:20.05 --> 00:01:22.09
Inside of the article and aside elements,

34
00:01:22.09 --> 00:01:25.08
we have anchor links with a class of btn.

35
00:01:25.08 --> 00:01:27.02
Now in an earlier episode,

36
00:01:27.02 --> 00:01:30.06
we converted anchor links
into buttons using CSS.

37
00:01:30.06 --> 00:01:32.08
So we're gonna be using mixins in LESS

38
00:01:32.08 --> 00:01:34.02
to share some of those properties

39
00:01:34.02 --> 00:01:36.06
across the buttons inside
of the article element

40
00:01:36.06 --> 00:01:39.05
and the button inside
of the aside element.

41
00:01:39.05 --> 00:01:40.06
Now if you'd like to preview the layout

42
00:01:40.06 --> 00:01:41.07
we're gonna be working with,

43
00:01:41.07 --> 00:01:44.03
you can open the HTML
file up in a browser.

44
00:01:44.03 --> 00:01:45.09
Inside of the browser, you'll see

45
00:01:45.09 --> 00:01:48.01
on the left hand side
here the article element.

46
00:01:48.01 --> 00:01:49.03
We have our two anchor links

47
00:01:49.03 --> 00:01:51.01
that are being converted into buttons.

48
00:01:51.01 --> 00:01:53.01
And over in the aside, we
can see the third button

49
00:01:53.01 --> 00:01:55.02
showing up over here.

50
00:01:55.02 --> 00:01:56.09
So now to begin creating our mixin,

51
00:01:56.09 --> 00:01:58.06
let's go back to the exercise files,

52
00:01:58.06 --> 00:02:02.07
and let's open up style.less
in our text editor.

53
00:02:02.07 --> 00:02:04.00
So with our LESS file open,

54
00:02:04.00 --> 00:02:06.00
there is one thing I wanna
call your attention to

55
00:02:06.00 --> 00:02:07.09
before we start creating our mixin.

56
00:02:07.09 --> 00:02:09.03
And that is in an earlier episode

57
00:02:09.03 --> 00:02:11.00
we created columns in a layout

58
00:02:11.00 --> 00:02:13.05
using the CSS calculation feature.

59
00:02:13.05 --> 00:02:16.03
However, one thing to keep
in mind with a LESS file,

60
00:02:16.03 --> 00:02:18.03
is that the LESS compiler will attempt to

61
00:02:18.03 --> 00:02:21.03
calculate that CSS calculation.

62
00:02:21.03 --> 00:02:24.02
So if I scroll down here and
find the article selector,

63
00:02:24.02 --> 00:02:27.01
we have a width, and the
original property was

64
00:02:27.01 --> 00:02:30.03
to calculate the width as being 100%,

65
00:02:30.03 --> 00:02:32.06
and then subtracting 240 pixels.

66
00:02:32.06 --> 00:02:35.08
So in order to keep this value
without the LESS compiler

67
00:02:35.08 --> 00:02:37.07
actually calculating this,

68
00:02:37.07 --> 00:02:40.06
we need to add a tilde
before the calculation,

69
00:02:40.06 --> 00:02:43.03
and we need to have the
calculation show up as a string.

70
00:02:43.03 --> 00:02:44.09
So we we need to put either double quotes

71
00:02:44.09 --> 00:02:47.08
or single quotes around that calculation.

72
00:02:47.08 --> 00:02:49.08
Now I've already added
this to the LESS file,

73
00:02:49.08 --> 00:02:51.02
but I wanted to call
your attention to this

74
00:02:51.02 --> 00:02:52.09
in case you try to use other calculations

75
00:02:52.09 --> 00:02:54.07
inside of a LESS file.

76
00:02:54.07 --> 00:02:55.08
So with that taken care of,

77
00:02:55.08 --> 00:02:57.03
let's scroll down to the bottom.

78
00:02:57.03 --> 00:03:00.05
Let's find the selector of a.btn.

79
00:03:00.05 --> 00:03:02.01
Inside of here are all of the properties

80
00:03:02.01 --> 00:03:05.00
that convert those anchor
links into buttons.

81
00:03:05.00 --> 00:03:07.06
So I want to reuse these
properties in a mixin,

82
00:03:07.06 --> 00:03:09.09
and then reapply these to the links

83
00:03:09.09 --> 00:03:12.02
inside of the article and the aside.

84
00:03:12.02 --> 00:03:13.09
So for now, let's come in here and select

85
00:03:13.09 --> 00:03:16.02
all of these properties.

86
00:03:16.02 --> 00:03:17.05
Let's go to the Edit menu.

87
00:03:17.05 --> 00:03:20.02
Let's choose cut.

88
00:03:20.02 --> 00:03:22.06
Then I'll just come in
here and delete that rule.

89
00:03:22.06 --> 00:03:24.00
And let's now create a mixin,

90
00:03:24.00 --> 00:03:26.03
and then put the properties
inside of the mixin.

91
00:03:26.03 --> 00:03:29.08
So a mixin inside of LESS
starts with a period.

92
00:03:29.08 --> 00:03:32.00
Then the name of the mixin.

93
00:03:32.00 --> 00:03:35.06
So we'll call this
button underscore normal.

94
00:03:35.06 --> 00:03:37.09
Put in a beginning and ending parentheses.

95
00:03:37.09 --> 00:03:39.09
Then a beginning and end bracket.

96
00:03:39.09 --> 00:03:41.05
So again, this looks a lot like functions

97
00:03:41.05 --> 00:03:44.01
inside of a language like JavaScript.

98
00:03:44.01 --> 00:03:44.09
And then let's come in here

99
00:03:44.09 --> 00:03:47.02
and paste in all of those properties.

100
00:03:47.02 --> 00:03:50.05
Now with my mixin in
place, I'm gonna hit save.

101
00:03:50.05 --> 00:03:52.08
If I go back to the
browser now and hit reload,

102
00:03:52.08 --> 00:03:54.01
we'll see that all of the anchor links

103
00:03:54.01 --> 00:03:56.00
are now showing up as regular links.

104
00:03:56.00 --> 00:03:58.01
So we've basically locked
all of the properties

105
00:03:58.01 --> 00:04:00.02
being assigned to those
because these are all

106
00:04:00.02 --> 00:04:02.05
now inside of a mixin.

107
00:04:02.05 --> 00:04:04.02
So now back inside of our LESS file,

108
00:04:04.02 --> 00:04:06.05
let's create rules that will reapply

109
00:04:06.05 --> 00:04:10.01
those properties back to
those individual anchor links.

110
00:04:10.01 --> 00:04:11.08
So let's first start by targeting

111
00:04:11.08 --> 00:04:15.01
the anchor links inside of the article.

112
00:04:15.01 --> 00:04:19.00
So let's type article space a.btn.

113
00:04:19.00 --> 00:04:21.04
And a space.

114
00:04:21.04 --> 00:04:24.07
Let's put in our brackets.

115
00:04:24.07 --> 00:04:26.03
Scroll up here a little bit.

116
00:04:26.03 --> 00:04:27.09
And now inside of this CSS rule,

117
00:04:27.09 --> 00:04:30.09
to apply the mixin we'll
simply type a period.

118
00:04:30.09 --> 00:04:33.06
Type in button underscore normal.

119
00:04:33.06 --> 00:04:36.03
Beginning and ending
parentheses, then a semicolon.

120
00:04:36.03 --> 00:04:39.00
Next let's come up here and
select this entire rule.

121
00:04:39.00 --> 00:04:40.06
Let's copy it.

122
00:04:40.06 --> 00:04:43.08
Lets hit a few returns, let's paste it.

123
00:04:43.08 --> 00:04:46.08
And let's change article to aside.

124
00:04:46.08 --> 00:04:49.05
So now with these in place,
let's save our LESS file.

125
00:04:49.05 --> 00:04:51.00
It'll get compiled.

126
00:04:51.00 --> 00:04:52.03
Let's go back to the browser.

127
00:04:52.03 --> 00:04:54.01
Let's hit reload, and we can now see

128
00:04:54.01 --> 00:04:56.06
that all of those properties
are now being reassigned

129
00:04:56.06 --> 00:05:01.02
to the links inside of both
the article and aside sections.

130
00:05:01.02 --> 00:05:03.01
So now that our mixin is working properly,

131
00:05:03.01 --> 00:05:05.09
now let's create the option
to create some customizable

132
00:05:05.09 --> 00:05:08.05
properties inside of our mixin.

133
00:05:08.05 --> 00:05:11.01
So let's go back to our LESS file.

134
00:05:11.01 --> 00:05:13.01
Let's find button_normal.

135
00:05:13.01 --> 00:05:14.05
Let's go inside of the parentheses,

136
00:05:14.05 --> 00:05:16.08
and let's add three
properties that we're going to

137
00:05:16.08 --> 00:05:19.08
send to this particular mixin.

138
00:05:19.08 --> 00:05:22.01
So the first one, we're
gonna name it text.

139
00:05:22.01 --> 00:05:25.02
And we'll use LESS variables.

140
00:05:25.02 --> 00:05:29.07
So use an at symbol, type in
the word text then a comma.

141
00:05:29.07 --> 00:05:33.02
Next we'll send the background color.

142
00:05:33.02 --> 00:05:36.08
So let's come up here
and type an at symbol.

143
00:05:36.08 --> 00:05:38.04
Type in background.

144
00:05:38.04 --> 00:05:40.05
And then finally we'll
send the border color.

145
00:05:40.05 --> 00:05:45.03
So a comma, at symbol, border.

146
00:05:45.03 --> 00:05:47.02
Now you can name these
variables anything you want.

147
00:05:47.02 --> 00:05:50.06
I'm choosing to name these
text, background, and border.

148
00:05:50.06 --> 00:05:52.04
Now inside of the mixin,
I'm gonna come in here

149
00:05:52.04 --> 00:05:55.03
and add another property called color.

150
00:05:55.03 --> 00:05:57.05
This is gonna be the color of the text.

151
00:05:57.05 --> 00:06:00.03
So I'll type color colon
space and the value

152
00:06:00.03 --> 00:06:04.00
is going to be this text variable.

153
00:06:04.00 --> 00:06:05.06
So I'll select this up here.

154
00:06:05.06 --> 00:06:07.05
Let's paste it down here.

155
00:06:07.05 --> 00:06:09.04
Hit a semicolon.

156
00:06:09.04 --> 00:06:12.04
Next let's select the
background variable name.

157
00:06:12.04 --> 00:06:13.08
Let's copy that.

158
00:06:13.08 --> 00:06:16.06
Let's come down here to the
background color property.

159
00:06:16.06 --> 00:06:19.05
Let's replace the pound sign and three Fs,

160
00:06:19.05 --> 00:06:21.08
with the background variable.

161
00:06:21.08 --> 00:06:25.02
Then finally let's come up here
and copy the border variable

162
00:06:25.02 --> 00:06:26.09
and let's come down here
to the border property

163
00:06:26.09 --> 00:06:30.02
and replace the pound sign
and three Fs for the color

164
00:06:30.02 --> 00:06:32.08
with the border variable.

165
00:06:32.08 --> 00:06:34.08
So now with these in
place, let's come down here

166
00:06:34.08 --> 00:06:37.05
to article space a.btn.

167
00:06:37.05 --> 00:06:39.04
And when we call the
mixin, we're gonna need

168
00:06:39.04 --> 00:06:41.07
to send these three properties.

169
00:06:41.07 --> 00:06:43.01
So the text color for the buttons

170
00:06:43.01 --> 00:06:45.07
inside of your article
element I want to be white.

171
00:06:45.07 --> 00:06:47.01
So I'll type a pound sign

172
00:06:47.01 --> 00:06:50.04
and three Fs inside of the
parentheses, then a comma.

173
00:06:50.04 --> 00:06:53.08
For the background color
we're gonna use a green color.

174
00:06:53.08 --> 00:06:57.01
So that's gonna be a pound
sign, eight C for red.

175
00:06:57.01 --> 00:06:59.09
C four for green.

176
00:06:59.09 --> 00:07:01.09
And two eight for blue.

177
00:07:01.09 --> 00:07:03.00
Then a comma and we're gonna use

178
00:07:03.00 --> 00:07:05.01
the same color for the border.

179
00:07:05.01 --> 00:07:09.03
So I'll come in here, copy
that, and then paste it again.

180
00:07:09.03 --> 00:07:12.04
So these three values are going to be sent

181
00:07:12.04 --> 00:07:16.02
when we call the button normal mixin.

182
00:07:16.02 --> 00:07:18.06
So now let's come down here to the aside.

183
00:07:18.06 --> 00:07:21.07
Lets find the button normal
mixin call down here.

184
00:07:21.07 --> 00:07:24.05
And we're gonna set the text
color here to a dark green.

185
00:07:24.05 --> 00:07:29.00
So pound sign, we're gonna use
72 for red, B zero for green.

186
00:07:29.00 --> 00:07:30.08
And zero three for blue.

187
00:07:30.08 --> 00:07:32.02
Then a comma.

188
00:07:32.02 --> 00:07:34.02
For the background color
we're gonna use white.

189
00:07:34.02 --> 00:07:36.05
So that's a pound sign and three Fs.

190
00:07:36.05 --> 00:07:38.08
And then for the border color
we're gonna use white as well.

191
00:07:38.08 --> 00:07:42.05
So pound sign and three Fs.

192
00:07:42.05 --> 00:07:44.08
So with these in place, let's hit save.

193
00:07:44.08 --> 00:07:47.05
The LESS file will be compiled to CSS.

194
00:07:47.05 --> 00:07:48.09
Let's go back to the browser.

195
00:07:48.09 --> 00:07:52.00
Let's hit reload, and we
can now see that the buttons

196
00:07:52.00 --> 00:07:53.09
in the article element have some

197
00:07:53.09 --> 00:07:55.02
slightly different properties

198
00:07:55.02 --> 00:07:57.03
than the button over in the aside.

199
00:07:57.03 --> 00:08:00.01
However, there are a series of
common properties being used.

200
00:08:00.01 --> 00:08:04.04
Such as display, padding,
border radius, and so forth.

201
00:08:04.04 --> 00:08:06.02
So now that we have
some variations working

202
00:08:06.02 --> 00:08:08.03
in our mixin for some of our properties,

203
00:08:08.03 --> 00:08:09.08
now we're gonna create another mixin

204
00:08:09.08 --> 00:08:12.00
so we can create some hover states.

205
00:08:12.00 --> 00:08:16.02
So let's go back to our LESS file.

206
00:08:16.02 --> 00:08:19.02
Now after the button normal
mixin, let's add another mixin.

207
00:08:19.02 --> 00:08:25.01
So we'll type dot button underscore hover.

208
00:08:25.01 --> 00:08:26.08
Put in our parentheses.

209
00:08:26.08 --> 00:08:29.00
Put in our brackets.

210
00:08:29.00 --> 00:08:30.08
Split this open on the brackets.

211
00:08:30.08 --> 00:08:33.07
Now the two properties we
wanna send to button hover

212
00:08:33.07 --> 00:08:36.02
will be just text and background.

213
00:08:36.02 --> 00:08:40.09
So I'll come up here and copy
these two variable names.

214
00:08:40.09 --> 00:08:42.07
Let's come down here and
paste them in the parentheses

215
00:08:42.07 --> 00:08:45.09
for our button hover mixin.

216
00:08:45.09 --> 00:08:48.05
And now inside of our button hover mixin,

217
00:08:48.05 --> 00:08:50.05
let's set some properties.

218
00:08:50.05 --> 00:08:52.01
First will be color.

219
00:08:52.01 --> 00:08:53.08
So color colon space.

220
00:08:53.08 --> 00:08:57.09
The value we're gonna set
that to the text variable.

221
00:08:57.09 --> 00:09:01.03
And then next we're gonna
set background color.

222
00:09:01.03 --> 00:09:05.06
And we're gonna set that value
to the background variable.

223
00:09:05.06 --> 00:09:06.05
And now with that in place,

224
00:09:06.05 --> 00:09:09.04
we need to assign hover
selectors to our buttons.

225
00:09:09.04 --> 00:09:10.06
And we're gonna do that by using

226
00:09:10.06 --> 00:09:12.02
the nesting feature of LESS

227
00:09:12.02 --> 00:09:15.00
which we covered in an
earlier episode as well.

228
00:09:15.00 --> 00:09:18.04
So let's come down here
to article space a.btn.

229
00:09:18.04 --> 00:09:20.04
Let's hit a few returns.

230
00:09:20.04 --> 00:09:24.07
So to create a nested selector
in LESS, we use an ampersand.

231
00:09:24.07 --> 00:09:26.08
Then we'll add a pseudo class of hover.

232
00:09:26.08 --> 00:09:30.09
So colon hover, space.

233
00:09:30.09 --> 00:09:33.00
Put in our brackets.

234
00:09:33.00 --> 00:09:34.03
And now inside of this selector

235
00:09:34.03 --> 00:09:37.02
we need to call the button hover mixin.

236
00:09:37.02 --> 00:09:40.05
So let's come up here and copy this.

237
00:09:40.05 --> 00:09:42.06
Come down here and paste it.

238
00:09:42.06 --> 00:09:45.01
Put in our parentheses and a semicolon.

239
00:09:45.01 --> 00:09:47.00
Now we're gonna send two parameters

240
00:09:47.00 --> 00:09:48.06
inside of the parentheses here.

241
00:09:48.06 --> 00:09:51.03
One for the text color,
and one for the background.

242
00:09:51.03 --> 00:09:55.00
So for the text color for the
buttons inside of the article,

243
00:09:55.00 --> 00:09:56.05
we want that to be black.

244
00:09:56.05 --> 00:09:59.02
So we'll type a pound
sign and three zeros.

245
00:09:59.02 --> 00:10:01.06
Then a comma, then for
the background color

246
00:10:01.06 --> 00:10:03.05
we're gonna set that to white.

247
00:10:03.05 --> 00:10:08.09
So that'll be a pound sign and three Fs.

248
00:10:08.09 --> 00:10:11.08
Next let's come up here and
select this entire selector.

249
00:10:11.08 --> 00:10:13.00
Let's copy that.

250
00:10:13.00 --> 00:10:17.03
Let's come down inside
of the aside space a.btn.

251
00:10:17.03 --> 00:10:21.07
I'll hit a few returns.

252
00:10:21.07 --> 00:10:23.05
Paste that down here.

253
00:10:23.05 --> 00:10:25.07
And the hover state for the aside,

254
00:10:25.07 --> 00:10:28.05
we're gonna set the text color to white.

255
00:10:28.05 --> 00:10:30.00
So let's come in here and
replace the pound sign

256
00:10:30.00 --> 00:10:33.05
and three zeros with a
pound sign and three Fs.

257
00:10:33.05 --> 00:10:34.06
And for the background color,

258
00:10:34.06 --> 00:10:36.07
I wanna use a semitransparent white.

259
00:10:36.07 --> 00:10:37.09
So instead of a hash symbol,

260
00:10:37.09 --> 00:10:40.07
we're gonna use the RGBA color space.

261
00:10:40.07 --> 00:10:44.09
So we'll type RGBA beginning
and ending parentheses.

262
00:10:44.09 --> 00:10:47.05
Inside of the parentheses, to use white

263
00:10:47.05 --> 00:10:54.04
we'll set red to 255 comma 255
for green comma 255 for blue,

264
00:10:54.04 --> 00:10:57.04
comma then point three for the alpha.

265
00:10:57.04 --> 00:11:00.01
So we'll get a 30% white
transparent background

266
00:11:00.01 --> 00:11:05.06
for the hover state of the
button inside of the aside.

267
00:11:05.06 --> 00:11:07.03
So with all of these properties in place,

268
00:11:07.03 --> 00:11:08.07
let's save our work.

269
00:11:08.07 --> 00:11:10.01
Let's go back to the browser.

270
00:11:10.01 --> 00:11:12.01
Let's hit reload.

271
00:11:12.01 --> 00:11:13.05
And now we can come over here and hover

272
00:11:13.05 --> 00:11:14.06
over each one of the buttons,

273
00:11:14.06 --> 00:11:19.05
and we'll see the different
styles taking effect.

274
00:11:19.05 --> 00:11:20.05
Now the last thing I'd like to do

275
00:11:20.05 --> 00:11:23.03
is add a right-facing arrow
to each one of the buttons.

276
00:11:23.03 --> 00:11:25.08
And we can do this by using
the same nesting technique

277
00:11:25.08 --> 00:11:28.05
in the main button normal mixin.

278
00:11:28.05 --> 00:11:30.07
So let's go back to our LESS file.

279
00:11:30.07 --> 00:11:33.02
Scroll up here a little bit.

280
00:11:33.02 --> 00:11:37.09
After the background color
property, I'll hit a few returns.

281
00:11:37.09 --> 00:11:39.06
Let's type an ampersand.

282
00:11:39.06 --> 00:11:41.03
Let's add a pseudo element.

283
00:11:41.03 --> 00:11:43.07
So we'll type in two colons.

284
00:11:43.07 --> 00:11:45.01
Then the word after.

285
00:11:45.01 --> 00:11:47.09
Add in our brackets,
we'll split this open.

286
00:11:47.09 --> 00:11:49.07
Inside of our pseudo element,

287
00:11:49.07 --> 00:11:52.00
the first thing we need to
do is define the content.

288
00:11:52.00 --> 00:11:57.03
So we'll type content colon
space two ticks and a semicolon.

289
00:11:57.03 --> 00:11:59.00
Inside of the ticks for the string,

290
00:11:59.00 --> 00:12:02.06
we wanna use a right-facing
arrow character.

291
00:12:02.06 --> 00:12:07.01
So we'll type a backslash, two five B-A.

292
00:12:07.01 --> 00:12:09.05
Then the next property
is gonna be font size.

293
00:12:09.05 --> 00:12:14.02
We're gonna set this to point eight ems.

294
00:12:14.02 --> 00:12:16.08
Next property is gonna be padding-left.

295
00:12:16.08 --> 00:12:20.02
We're gonna set that to six pixels.

296
00:12:20.02 --> 00:12:24.08
And then finally we're gonna
set the opacity to point 65.

297
00:12:24.08 --> 00:12:27.02
So with these in place
we'll hit save again.

298
00:12:27.02 --> 00:12:29.03
And now since we nested
this pseudo element

299
00:12:29.03 --> 00:12:32.00
into the button normal mixin,

300
00:12:32.00 --> 00:12:33.09
if we come back to the
browser and hit reload,

301
00:12:33.09 --> 00:12:35.03
we'll now see that all of the buttons

302
00:12:35.03 --> 00:12:39.05
have the right facing arrow
being applied to them.

303
00:12:39.05 --> 00:12:40.05
Now if you're curious to see

304
00:12:40.05 --> 00:12:44.00
how all of these LESS properties
get compiled into CSS,

305
00:12:44.00 --> 00:12:48.07
we can go back to the exercise
files, open style.css,

306
00:12:48.07 --> 00:12:51.01
scroll down to the bottom,
you'll see all of the properties

307
00:12:51.01 --> 00:12:53.07
that were defined inside
of the mixin being applied

308
00:12:53.07 --> 00:12:57.04
to all of the selectors
in the final CSS file.

309
00:12:57.04 --> 00:12:58.06
And so now if you'd like to learn more

310
00:12:58.06 --> 00:13:00.08
about using LESS, or SASS,

311
00:13:00.08 --> 00:13:02.07
I'd recommend taking Joe Marini's course

312
00:13:02.07 --> 00:13:05.03
entitled CSS with LESS and SASS.

313
00:13:05.03 --> 00:13:08.06
Which is also available
here in the library.

314
00:13:08.06 --> 00:13:10.08
And so with that, I'll
conclude this episode.

315
00:13:10.08 --> 00:13:13.07
And as always, thanks for watching.