"Git Basics" was retired on February 8, 2019. 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 Sass Basics!
You have completed Sass Basics!
Preview
Mixins are one of the most used features of Sass. They let you break CSS down into modular chunks that you can reuse anywhere in your stylesheets. Being able to do this helps us to avoid writing repetitive code.
Resources
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've learned that writing dry,
reusable and
0:00
easily maintainable code is
the driving force in SaaS.
0:03
But even with features like variables,
nested selectors and the ampersand in
0:06
place it's likely that you're style
sheets are repeating chunks of styles.
0:09
For instance you may be repeating
the same group of properties for
0:14
font, text layout and
border styles in various selectors.
0:16
Or you're writing multiple
vendor prefixes over and
0:20
over again for new CSS properties
that lack full browser support.
0:22
Well, this is where mixins come in to help
streamline your CSS and save you time.
0:25
Mixins are one of the most
used features of SASS.
0:30
They let you break CSS down into
modular chunks that you can reuse
0:33
anywhere in your style sheets.
0:36
Being able to do this helps us to
avoid writing repetitive code.
0:38
Let's look at the before and
after pseudo element rules
0:42
used to create the skewed effect
in our site's header and footer.
0:45
Taking a look at these two rules,
we'll see that many of the same properties
0:51
are being repeated like content display,
width, height, position and transform.
0:56
Now if we use the same effect on other
0:59
elements of the site we'd end up copying
and pasting a lot of this code again.
1:02
That's a lot of repeated code.
1:06
Fortunately SaaS mixins are immensely
useful in this situation.
1:08
A mixin is like a reusable CSS rule,
1:12
they let you turn repeated declarations
into portable and reusable styles.
1:14
Using Mixins is a two step process.
1:18
First, you create the mixin
with the mixin directive.
1:21
Then you include the mixin inside of
the rules using the include directive.
1:24
The mixins stored, they need to be
defined before they are included
1:28
usually at the top of the style sheet or
1:32
in a separate mixins file as
you learn in the later video.
1:33
Below the footer rule let's create a mixin
named skewed for our skewed effect
1:37
by typing at mixin followed by skewed and
a set of curly braces.
1:43
Now we'll select and cut all the repeated
declarations from one of the pseudo
1:50
element rules, so everything but
the background color.
1:54
And positioning off set and
paste them inside our mixin.
1:57
Before we use this mixin,
you can delete all of the background
2:08
positioning properties from
the other pseudo element rule.
2:11
Now if you save the file and have a look
at the output CSS you won't see any
2:20
of the properties we
placed in the mix in yet.
2:25
At this point our mix
in doesn't do anything.
2:28
To output code from a mix in
you must include it in a rule.
2:32
And you call the mix in
using the include directive
2:36
followed by the name of the mix in.
2:39
So let's include skewed inside
the nested before and after rules.
2:40
So in the after rule,
2:48
let's say @include skewed.
2:51
I'll just go ahead and copy it and
paste it inside the footers before rule.
2:57
So including the mixin in these
rules means that SaaS is going to
3:04
place the properties defined
in the mixin inside the rules.
3:09
Now when we save and
compile our latest changes, we see that
3:14
SaaS produces an undefined mix in error
in the console and in the output CSS.
3:20
Remember mix ins need to be
defined before they are included.
3:27
And we've written our mix in below
the header and footer rule so
3:33
they can't reference the mix in and
the style's defined inside it.
3:36
So we'll simply need to move the mix
in above the header and footer rules.
3:41
So I'll go ahead and select it, cut it,
and place it below the variables.
3:45
I'll also copy this variables comment and
3:57
paste it above the mix in just
to have a comment for mix ins.
3:59
I'll give the style sheet a save and
4:07
if I check the output now we should see
the content display with height, position,
4:09
and transform properties inside each of
the pseudo element rule sets, and we do.
4:14
Cool, and
there are also no errors in the consult.
4:20
Perfect, so hopefully you're beginning
to see the benefits of using Mixins.
4:23
You define a set of properties in one
place and you get to reuse them anywhere.
4:27
Mixins can also help you
create layout utilities.
4:37
For instance your design may include
many elements that need to be centered
4:39
on the page,
well you can create a mixin and
4:43
apply to any element
that should be centered.
4:46
Let me show you by creating
a mixin named center right
4:49
below out skewed mixin in here.
4:53
So we'll type @mixin center.
4:56
And inside, add the properties needed to
center our container element on the page.
5:02
Let's say width 90%,
then below that a max-width property.
5:07
I'll store the side's max
with value in a variable so
5:13
we can also reference it
later in different places.
5:16
So up here in my variables.
5:19
I'll declare in variable named
$max-width And set it to 1000 pixels.
5:22
Then back in this center, mixin,
5:33
I'll set the max width value
to the max width variable.
5:35
[SOUND].
5:40
Then I'll apply a margin left of auto and
a margin right of auto.
5:42
[SOUND].
5:47
And you can now include these center mixin
wherever you need to center an element.
5:52
For example down in our media queries
the main content div is 90 % wide and
5:57
centred when the vport is 768 pixel or
wide.
6:04
So here inside the min-width 768 pixel
media query near the bottom of the file.
6:08
I'll replace the declarations inside the
main content rule with at include center.
6:13
Our layout still looks good.
6:29
So any time you have a container
element that needs to
6:31
be centered on the page you simply
include the center mixin inside its rule.
6:34
We're just scratching the surface of
what you're able to do with mix ins.
6:44
In the next video you'll learn one
of the best features of mix ins,
6:47
passing content and
style blocks to mix ins.
6:50
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