"How to Build a WordPress Theme" was retired on January 1, 2015. 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

Modular CSS with Sass

Well done!

You have completed Modular CSS with Sass!

Sign up for Treehouse Back to Library

Using the Media Query Mixin

2:46 with Guil Hernandez

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 up

    Related 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 up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up