Using the Media Query Mixin

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