"Node.js Basics 2017" was retired on September 1, 2022. You are now viewing the recommended replacement.
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