Treehouse is currently experiencing service disruptions due to an ongoing Amazon Web Services outage. Some account features may be temporarily unavailable.

You found it first ⚡ 50% off any plan for 6 months, exclusive to new subscribers for a limited time only.

✨ Earn college credits in Cybersecurity, JS, HTML, CSS and Python

🌟 Dreaming of a bright future? 🎓 Ask about the Treehouse Scholarship program! 🚀

Join the Treehouse affiliate program and earn 25% recurring commission!

Well done!

You have completed CSS to Sass!

Sign up for Treehouse Back to Library

Preview

Sign up for Treehouse Continue

Writing a Mixin for Common Text Patterns

6:45 with Guil Hernandez

In this video, we'll see how a mixin can make writing text properties more convenient.

Teacher's Notes
Questions?
Video Transcript
Downloads
Workspaces

Quick Reference

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

Related 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 up

You need to sign up for Treehouse in order to set up Workspace

Sign up