Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Mixins are a smart way of reusing our code. One of the last steps in refactoring is replacing common patterns in our code with reusable mixins. Let's start by writing a mixin that writes our @font-face declarations
Quick Reference
Related Videos
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
So now the last step is to take common
patterns in our project and
0:00
replace them with reusable code modules.
0:04
And we can do that with mixins.
0:06
So mixins are a smart way of reusing our
code.
0:08
Because instead of having to rewrite the
common properties,
0:11
or tedious bits of CSS in our project.
0:15
We can write them once and mixin.
0:18
Then let Sass write them dynamically once
we include them.
0:20
And what's also great about creating Sass
mixins
0:23
is that we can reuse them on other
projects if we want.
0:25
Usually, we'll wanna write mixins that
make use of arguments to dynamically alter
0:29
CSS values.
0:33
Instead of ones that just repeat blocks of
code.
0:34
Which depending on how we write them, may
cause some extra bloat in the CSS output.
0:37
So first, inside the base directory,
0:44
I'm going to create a new partial that
will contain our mixins.
0:46
So let's call it _mixins.css.
0:51
And now let's go ahead and import our new
partial inside our _index.scss partial.
0:56
So I'll simply copy one of the imports and
we're going to import our mixins partial.
1:04
Right after the variables and right before
the base styles.
1:11
So I've replaced the variables partial
name with the new one; mixins.
1:14
All right, so now we'll go ahead and save
our index partial and close it out.
1:22
So first, in our mixin partial,
1:27
let's create a mixin that writes our font
face declarations.
1:30
So for instance, let's open up our
components directory and
1:34
the typography partial.
1:39
And as we can see we're importing a font
and we're using this font for
1:41
our main heading.
1:44
So if we're importing a few fonts in our
project.
1:45
Even having to copy the font-face rules
and
1:48
change the font families and filenames can
be pretty tedious.
1:52
So this will be a great example of how
mixins can help us out.
1:55
So before we build our mixin, let's open
up our variables partial.
2:00
And like we did for our image asset path,
let's create a path for our fonts.
2:05
So right beneath the path image variable,
let's declare a new variable.
2:12
And we'll call it path-font.
2:17
And as the value we're going to write the
path to our fonts directory,
2:22
which is simply called fonts.
2:27
Right, so let's save our variables
partial, and
2:29
back in our mixins partial, let's add a
comment.
2:32
Telling us that this is for web fonts.
2:37
And we're gonna write our mixin by typing
@mixin.
2:40
And let's call it font-face.
2:45
And then we're gonna add a set of
parentheses, and a set of curly braces.
2:49
So inside our parentheses.
2:54
The mix in will accept two arguments.
2:56
One will be the font family, and the other
will be the file name.
2:58
So let's go ahead and write the arguments
for those.
3:02
First we're going to create the one for
the font family.
3:05
So let's create the variable argument
family then we'll write a comma and
3:08
right after that we'll create the one for
file.
3:13
Which we'll simply call file.
3:16
Okay, so what we'll do next is go over to
the typography partial.
3:18
And I'm going to copy the entire font face
rule.
3:23
And paste it inside our new mixin.
3:27
So, go ahead and select it and cut it.
3:28
I'll save this.
3:33
Then we'll just go ahead and paste it
right inside the font face mixin.
3:34
All right.
So first we'll get rid of
3:40
the hard coded abolition regular font
family value.
3:42
And as the font family property we're
going to pass this family variable.
3:46
So I'll just go ahead and copy it and
paste it in as a value.
3:51
And next we're going to make dynamic paths
with that variable we just created.
3:55
So once again, since our font assets path
is a string.
4:01
We'll need to use interpolation to pass
the path font variable in the URL's.
4:06
Just like we did with our image assets.
4:10
All right, so first let me select the
first path here and delete it.
4:13
And we're going to use interpolation
syntax.
4:18
So we're going to write hash set of curly
braces,
4:21
then inside the curly braces define the
path font variable.
4:25
And now we'll need to do the same for our
font file variable.
4:31
So, web font file names are usually
suffixed with web font, so
4:35
we'll keep that in here.
4:40
That way we won't have to retype it.
4:42
So, what I'll do is select
abolition-regular in the filename,
4:44
delete it, and replace it with our new
variable.
4:50
So once again we'll type hash, curly
braces,
4:54
then inside the curly braces we're going
to pass that file variable.
4:57
All right, so let me go ahead and copy the
two variables we just wrote.
5:03
Then I'm going to replace the three values
below with our variables.
5:08
So first, we'll do it for our embedded
open type format.
5:11
Right below that, we'll do it for our WAF
format, and finally, the true type format.
5:17
Right?
So, let's go ahead and save it.
5:23
And now, whenever we include this mixin in
a rule,
5:25
it will pass the font family name we
define as the font family value.
5:29
Then pass the file name we define in all
the source values.
5:35
So now, we can go back to our typography
partial, and
5:42
include our new font face mixin.
5:46
So to do that, I'll type @include followed
by the mixin name which is, font-face.
5:49
Then our set of parenthesis and a semi
colon.
5:56
So now inside the parentheses as the
argument,
6:00
let's go ahead and pass the font family
name and the file name.
6:03
So first I'm going to pass the
abolition-regular
6:08
font family as the font family values.
6:13
So we'll type Abolition Regular and
6:15
make sure it's surrounded by quotes.
6:19
Then we'll add a comma and then we'll type
the file name, which is abolition-regular.
6:23
All right, so let's save and compile our
partial,
6:29
and if we bring up our CSS output.
6:36
As you can see the mixin and outputs are
abolition regular font face rule.
6:40
So now anytime we need to import a font we
can simply include our font face mix in.
6:48
And the new font's name in Sass will take
care of this
6:53
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up