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