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
Sass supports a null data type that lets you define optional mixin parameters without creating unnecessary CSS output. Also, remembering the correct order of arguments can be tricky. Sass solves this by allowing you to name the arguments you pass to a mixin, using keyword arguments.
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
You learn that you can pass arguments
to mixins to set values of properties.
0:00
And that the arguments must be defined
in the same order parameters appear
0:04
in the mixin.
0:08
For instance, the roundy mixin requires
arguments for with the high dimension and
0:09
border style.
0:14
So when including this mixin,
we always need to pass a value for
0:15
each variable, otherwise,
it will output an error message.
0:20
So what if for example you don't
need border styles in one of your
0:22
rounded elements?
0:25
Well, if you remove the border
arguments past a roundy,
0:26
you'll get an error that reads error
mixin roundy is missing argument border.
0:30
Well, you could zero out
the border properties by passing
0:35
none as the argument, or better yet
give the border parameter
0:39
a default value of none,
that way the border argument is optional.
0:44
Well, both of these approaches
produce unnecessary CSS and output.
0:49
If you have a look at style.css,
0:54
you get to see that the roundy
mixin will output border none.
0:56
Each time you omit the argument for
border.
1:01
So Sass supports a null data type.
1:05
That let's you define optional
mixin parameters while creating
1:07
unnecessary CSS outputs.
1:11
When you set a mixins parameter to null by
default, the mixin will not output CSS for
1:13
that parameter unless you pass
an argument for it in the include.
1:18
And the border parameter is a great
example of where you can use null to avoid
1:23
outputting needless CSS.
1:27
So now even if you omit the argument for
border from the rally include,
1:30
the full border declaration gets
excluded from the output CSS.
1:35
And the only way it would
compile border styles to CSS is
1:39
if you pass the mix in a border argument.
1:44
So if we save and
have a look at output CSS, There it is.
1:47
In the previous video, you learned that a
mixin with multiple arguments requires you
1:52
to pass the arguments in the same
order the parameters are defined.
1:56
Well, it's common to create a mixin that
accepts two, three or more argument.
2:00
Now, remembering the correct
order can be tricky.
2:03
So Sass solves this by allowing you to
name the arguments you pass to a mixin,
2:05
using what are called keyword arguments.
2:09
You specify a keyword argument by
including the variable name before
2:12
the values.
2:16
For example, I can completely reverse
round this order of arguments
2:17
without producing any errors by
writing the border variable and
2:22
one of the border values and the damn
variable before the dimension values.
2:27
The keywords let Sass know exactly
which arguments you're passing so
2:36
it does not output any errors.
2:41
Now, it may seem like keyword arguments
make your mixin includes lengthier,
2:44
but at least this way you don't have to
remember the exact order of arguments.
2:49
In addition, it can make the mixin
include sort of self documenting since
2:53
the parameter names clearly
indicate what the values represent.
2:57
Now, this is just a simple
example with two arguments.
3:00
Now, take a look at how key word arguments
and null help you create larger mixins.
3:04
Our main content and
card elements use flexbox for the layout,
3:10
both are flex containers so they set
the contents for flexbox layout and
3:16
contains flex items, the actual
element being laid out with flexbox..
3:22
Now, flexbox in an immensely
helpful CSS layout approach, so
3:25
it's likely that I will define other flex
containers on my site as I'm building it.
3:29
Perhaps, I'll extend the main
navigation using flexbox or
3:33
I've used it to vertically
align sections of the site.
3:36
So let's create a flex container
mixin that outputs common of flexbox
3:38
properties used to
define a flex container.
3:42
So over in the mixin's partial,
I'll first add a comment for
3:44
the mixin that says,
create a flex container.
3:49
Then define a new mixin named flexy.
3:55
Inside the mixin,
let's write the common properties
4:01
of a flexy container like display,
flex-direction,
4:06
flex-wrap, and justify-content.
4:14
So now, let's define the mixin
parameters using variables.
4:22
I'll name the variable for
the display value, disp, or D-I-S-P,
4:27
and assign it a default value of flex.
4:31
The most common display value used
when creating a flex container.
4:34
Now, when working with
multiple parameters,
4:38
I like to place each on a separate
line to make the code easier to read.
4:40
Nex, create the variables dir for
flex-direction,
4:48
then wrap for flex-wrap, and
just for justified content.
4:53
Now, not all flex containers will
require these three values so
5:02
make them optional parameters setting
their default values to null.
5:06
By setting these to null, Sass will
ignore them if no value is passed,
5:17
meaning the final CSS will be simpler and
less cluttered.
5:20
To complete our mixin,
5:23
we'll set the property values
to their respective variables.
5:24
So let's set the display to the display
variable, flex-direction to dir,
5:27
flex-wrap to wrap and
justify-content to the just variable.
5:33
All right,
now we're ready to use our mixin.
5:39
Go ahead and open the containers partial
located in the layout folder and let's
5:42
replace the flexbox properties defined in
the main content rule with include flexy.
5:47
If we give the file save and
refresh the browser,
5:58
you can see that the main containers
layout is still being displayed
6:01
using flexbox because we set
the display value to flex by default.
6:06
So now, the only argument we need to pass
this particular flexy include is wrap,
6:11
which sets main contents flex-wrap value.
6:16
Flex-direction and
justify-content will remain as null.
6:20
So let's try passing the value
wrap as the flexbox argument.
6:22
And now,
our flexbox layout is broken, yikes.
6:28
Well, remember Sass requires that you
pass mixin arguments in the same order
6:31
the parameters are listed.
6:36
And if we have a look at our flexy mixin,
6:37
we can see that the first parameter
variable in the list is disp for display.
6:40
So the value wrap is being assigned to
6:45
that variable overriding
the default flex value.
6:48
As you can see, wrap is the third
argument in the list of variables.
6:52
So instead of forcing you to
pass redundant display and
6:56
flex-direction arguments only because
they are listed before flexbox.
6:59
So for example, before wrap,
we'll pass flex and null.
7:03
Well, Sass let's you use
keyword arguments to
7:07
explicitly set just the values you need.
7:11
So we can omit all arguments
listed before wrap and
7:15
just write the variable
wrap before the value.
7:19
If we save this file and have a look at
the output CSS, we can see that the mix
7:24
in outputs the display and
flex-wrap properties only remain content.
7:29
Over in the card.scss partial,
the card rule requires that you set
7:35
flex-direction to column, so let's
replace its flex container properties.
7:40
With @include flexy,
7:45
Passing in the keyword argument dir for
flex-direction in the value column.
7:50
Once we save this and have a look at
the output CSS, you can see that it
7:57
outputs only the display and
flex-direction properties for card.
8:01
So when passing multiple arguments,
8:05
keyword arguments make
your code easier to read.
8:07
And they help you remember which
argument you're referencing.
8:10
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