Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Sass Basics

Well done!

You have completed Sass Basics!

Sign up for Treehouse Back to Library
Preview
Video Player
00:00
00:00
00:00
  1. 2x 2x
  2. 1.75x 1.75x
  3. 1.5x 1.5x
  4. 1.25x 1.25x
  5. 1.1x 1.1x
  6. 1x 1x
  7. 0.75x 0.75x
  8. 0.5x 0.5x
Use Up/Down Arrow keys to increase or decrease volume.

Creating Powerful Mixins

4:30 with Guil Hernandez

Like functions, mixins also accept parameters. This makes mixins even more powerful and flexible styling tools!

[MUSIC] 0:00
Earlier when you learned about mixins, 0:04
you wrote all the necessary properties and values inside the mixin itself. 0:06
For example, the skewed and 0:11
center mixins copy over these exact declarations wherever they're included. 0:13
But mixins don't have to use the same values each time they're included. 0:18
Like functions, mixins also accept parameters, 0:22
making them even more powerful and flexible styling tools. 0:25
For example, the center mixin has a predefined width value of 90%. 0:28
What if you wanna center another element but set its width to 50%? 0:33
Well you could omit the width declaration from the mixin and 0:37
define the width via the content directive. 0:41
But there's a better way. 0:43
You can make mixins smarter and extensible with parameters. 0:45
So let's have the center mixin accept the variable w for width as a parameter. 0:49
Now, replace the set width value with the w variable. 0:56
So now when including the center mixin, we can specify any width value as an argument 1:02
and it will assign it to the width property. 1:07
Open the containers partial located inside the layout folder. 1:10
And in the main content rule, let's pass center the value 90%. 1:15
Now, this was a simple example of the power of mixin arguments. 1:26
Now let's create a more complex mixin. 1:30
The featured image rule in our components images partial uses width, 1:35
border, and border-radius properties to create a rounded image. 1:41
Now I really like this effect, so it's likely that I'll use it in other places 1:45
like author bios, thumbnail images, or icon borders. 1:49
So let's convert this set of CSS declarations into a dynamic mixin. 1:53
At the bottom of the mixins partial, I'll add the comment Rounded elements. 1:58
And below it, I'll create a new mixin named roundy. 2:07
The mixin will accept a parameter that applies width and 2:15
height dimensions, so let's name this variable dim for dimensions. 2:18
And inside the mixin, we'll add width and height properties and 2:24
set their values to the variable dim. 2:28
Then we'll add the magic ingredient in perfectly rounded elements, 2:35
a border radius of 50%. 2:39
I'll give this file a save. 2:43
And now in the images partial, you can replace the width and 2:46
border-radius declarations. 2:50
With our new roundy mixin by typing include roundy, 2:52
passing at the argument 165px. 2:58
And perfect, now we can reuse our handy roundy mixin wherever we 3:06
wanna display rounded elements. 3:11
While we're at it, let's also add the border declarations to the roundy mixin. 3:13
That way we can define the border-radius and border styles all in one place. 3:18
So we'll go back and have roundy, except a second parameter named border or brdr. 3:22
Then in the mixin, add a border property and set the value to our border variable. 3:29
Now the border CSS shorthand property accepts anywhere from 3:38
one to three values for setting the border width, style, and color. 3:43
So back in the image featured rule, 3:47
we'll pass roundy the set of border values as one argument. 3:49
So just go ahead and cut them from the border declaration below it. 3:52
Delete the border property and pass it to the roundy mixin as a second argument. 3:56
Keep in mind that a mixin with two or more parameters like roundy, 4:01
requires that you pass the arguments in the same order you defined the parameters. 4:05
Otherwise, the code will produce errors. 4:11
When working with mixins that accept just two arguments 4:13
remembering the order is simple. 4:16
But if you're using a mixin that accepts multiple arguments, 4:18
getting the order right can be tricky. 4:21
So in the next video, I'll teach you a clever and organized way to pass arguments 4:22
to mixins using keyword arguments and the null data type. 4:26