So now, when we need to use a media query, instead of the writing out

the full media query, we can simply include our new media query mixin.

So, let's start by replacing the media query containing our column loop,

here in our gridcolumns.scss file.

So instead of the full media query directive,

we can replace it with the mq one so we'll say include mq.

And we'll pass the medium media query break point.

And we'll do the same in our column styles.

So, I will just go ahead and

copy the one we just wrote and scroll down to our column rules.

And we'll replace the first one with the mixin, and

this time we'll pass the argument small.

Now we'll replace the media query below that with our mixin and

we'll pass the value medium.

So one last thing we'll do here is make this column loop up

here a little prettier with the mixin.

So what I'm gonna do is I'm gonna cut it out of the media query.

In this grid column's file.

And then we're gonna move over to our mixins partial.

And we're gonna create an new mixin for this.

So all the way at the bottom, underneath the comment for

grid columns, I'm gonna create a new mixin called g-columns.

And inside the mixin I'm going to paste in our loop.

And now there's just one more change we need to make.

So instead of the grid_col class, we're going to

generate a column modifier class with the ampersand double dash prefix.

So, we replace grid col with ampersand, and the two dashes.

So now, we can go ahead, and save, and close our mixins.scsspartial, and

in our grid columns file, we can simply write a new grid column selector.

So, we say grid__col.

And we'll still keep the medium media query mixin inside our grid column rule

because now we're going to include that g columns mixin inside the media query.

So it will say include g columns.

So I'll just go ahead and save our file, and let's take a look at the preview.

And it looks like we're all set.

So now if we go back and take a look at our CSS output, we can see how all 12 of

our grid column classes are still nested inside the medium media query break-point.

Cool.