Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed CSS to Sass!
You have completed CSS to Sass!
Preview
In this video, we'll see how a mixin can make writing text properties more convenient.
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, let's create one more mix in.
0:00
Now, currently in our project, we seem to
be rewriting a common pattern for
0:03
styling our font size, line height, font
weight, and color.
0:08
So for example here in our h3, we're
defining a font size.
0:12
A color property, and the line height, and
we could also see this pattern.
0:17
In other places like in the body and in
our h2 rule.
0:22
Well sure we can keep the font
declarations as is
0:27
even though they don't accept color
values.
0:30
And that's fine.
0:32
But let's see how can use a mix in to help
making writing these
0:33
properties a little more convenient for
us.
0:36
So back in our mixins.scss partial.
0:40
Let's include a comment that lets us know
that this is our text mixin.
0:43
And let's create a new mixin by typing
@mixin and let's call it text.
0:50
So our text mixin will accept four
arguments.
0:59
One for the font size, another for the
line height, one for
1:02
the font weight, and finally one for
color.
1:05
Now the only required value will be for
the font size.
1:07
So, let's first declare an argument for
that, so we'll call it size.
1:11
And next, let's set our line height
argument.
1:17
We'll call this one l-height.
1:19
Let's also set one for font weight.
1:23
Let's call it weight.
1:26
And finally, we'll set the color argument.
1:27
I'm gonna call this one color.
1:30
So, the next thing we're gonna do is set
the default values for
1:32
line height, weight and color to null.
1:36
And.
And what this does is it will make them
1:40
optional arguments, and by setting the
values to null,
1:42
we're not outputting any CSS for
1:46
the three properties unless we pass a
value for them when including this mixin.
1:48
Take a look at the teacher's notes for
more reference on the null data type.
1:54
All right, next we're going to write the
properties for our mixin.
1:59
So first we're going to add a font size
property.
2:03
And the value for that will be the size
variable and right below that.
2:07
Let's write a line height property.
2:16
And we're gonna make the value for this,
the l-height variable.
2:18
And right below that, we're going to add
the font weight property and
2:24
this will accept the argument weight and
finally.
2:30
We're going to write a color property, and
the value for
2:34
this will be the color variable.
2:38
So now the values we enter when including
this text mixin
2:41
will be dynamically passed down to their
respective properties.
2:46
So if you've used mixins before, you'll
have noticed that where we include
2:51
a mixin in a rule is important because it
affects the output CSS cascade.
2:56
So it's usually best to include mixins
first, in a rule,
3:00
followed by the rest of the declarations.
3:05
So first, we're going to include our text
mixin.
3:08
Inside the body rule.
3:11
So as the top declaration, we're going to
say @include text.
3:12
And then we'll pass our arguments.
3:18
So as the font size value, let's pass.
3:20
1 em and the line height will be 1.5 and
3:24
since we're not passing a value for font
weight, in our list of arguments,
3:30
since it doesn't need one, we'll need to
let Sass know that we're skipping it
3:34
by including the next argument in the list
and the value we want to pass.
3:38
Otherwise Sass will assign the wrong value
to a property.
3:43
Now there are ways around that but it's
beyond the scope of this course.
3:46
So we're gonna skip the line height value
and define the color value next.
3:48
So we're gonna have to type the color
variable in our argument,
3:53
then define the color value, in this case
it's the color text based variable.
3:57
All right.
So now we could actually delete the color
4:05
declaration in our body rule, and we're
going to keep the font stack variable.
4:08
And now we're only gonna define the font
family property.
4:14
And for that we'll make the value stack
Helvetica.
4:18
[BLANK_AUDIO]
4:21
All right.
Looks good.
4:24
So let's do another one.
4:26
We'll scroll down to the h2 rule.
4:31
And as the top declaration,
4:33
we're going to say @include text.
4:37
And let's pass our list of arguments.
4:41
So as the font-size, go ahead and copy
this font-size value,
4:44
paste it in as a first argument.
4:48
Then the line-height is 1.1 and the
font-weight will be normal.
4:51
And there's no color for this one, so
we're going to leave it out.
4:57
So now we can delete the three
declarations below, save it,
5:01
and let's take a look at the browser.
5:06
All right, so that looks good.
5:09
Everything went through just fine.
5:12
And right below.
5:14
Let's do the same for our h3.
5:15
So, as the top declaration, we'll say
@include text.
5:17
And as our font size argument, we're gonna
say 1.25em.
5:23
Our line height will be 1.2.
5:30
So, again, we'll need to define the
variable, color, in our list of arguments.
5:32
And this time the value will be the color
variable, color-text-dark,
5:38
so let's go ahead and remove the three
declarations below and
5:43
only keep the include and the margin
bottom declaration in our h3, so
5:47
let's see how that looks, we'll save and
refresh.
5:52
And everything looks good.
5:56
So go ahead and add the rest of these on
your own,
5:59
wherever you see fit in the project.
6:03
Now in the advance Sass, and modular CSS
with Sass course, you learn how to
6:06
build more advanced functions and mixins
to handle font sizes and line height.
6:11
Again, these are all just suggestions, to
make our workflow more efficient.
6:15
You can do things differently if you'd
like.
6:20
If you prefer writing out the full
declarations, that's also okay.
6:22
Just remember, the key to dry code is not
repeating yourself, when writing code.
6:25
It doesn't necessarily mean that there
can't be repetition in the css output.
6:31
And finally, there are actually some
benefits to using mixins over extends, so
6:36
I've added some great reference material
on that in the teachers notes.
6:40
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