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 Modular CSS with Sass!
You have completed Modular CSS with Sass!
Preview
Instead of writing out a full media query, we can now include the handy mixin we created in the previous video.
This video doesn't have any notes.
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 now, when we need to use a media query,
instead of the writing out
0:00
the full media query, we can simply
include our new media query mixin.
0:03
So, let's start by replacing the media
query containing our column loop,
0:08
here in our gridcolumns.scss file.
0:13
So instead of the full media query
directive,
0:16
we can replace it with the mq one so we'll
say include mq.
0:20
And we'll pass the medium media query
break point.
0:25
And we'll do the same in our column
styles.
0:29
So, I will just go ahead and
0:32
copy the one we just wrote and scroll down
to our column rules.
0:33
And we'll replace the first one with the
mixin, and
0:37
this time we'll pass the argument small.
0:41
Now we'll replace the media query below
that with our mixin and
0:45
we'll pass the value medium.
0:50
So one last thing we'll do here is make
this column loop up
0:53
here a little prettier with the mixin.
0:56
So what I'm gonna do is I'm gonna cut it
out of the media query.
0:59
In this grid column's file.
1:05
And then we're gonna move over to our
mixins partial.
1:07
And we're gonna create an new mixin for
this.
1:11
So all the way at the bottom, underneath
the comment for
1:12
grid columns, I'm gonna create a new mixin
called g-columns.
1:17
And inside the mixin I'm going to paste in
our loop.
1:25
And now there's just one more change we
need to make.
1:29
So instead of the grid_col class, we're
going to
1:36
generate a column modifier class with the
ampersand double dash prefix.
1:39
So, we replace grid col with ampersand,
and the two dashes.
1:45
So now, we can go ahead, and save, and
close our mixins.scsspartial, and
1:49
in our grid columns file, we can simply
write a new grid column selector.
1:55
So, we say grid__col.
2:00
And we'll still keep the medium media
query mixin inside our grid column rule
2:05
because now we're going to include that g
columns mixin inside the media query.
2:11
So it will say include g columns.
2:15
So I'll just go ahead and save our file,
and let's take a look at the preview.
2:22
And it looks like we're all set.
2:26
So now if we go back and take a look at
our CSS output, we can see how all 12 of
2:35
our grid column classes are still nested
inside the medium media query break-point.
2:40
Cool.
2:46
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