Media Query Mixin

Now that we're using a lot of 0:01 media queries to define breakpoints in our project, let's create a mixin, 0:06 that will help make our media queries easier to use and maintain. 0:10 So, again, like we've done with our colors, textiles grid system and 0:14 pretty much everything else, we're first going to configure all of 0:18 our media query breakpoints in the config.sess partial. 0:21 So, all the way at the bottom of our file, right beneath the comment for 0:26 breakpoints, we're going to create variables for 0:30 the small, medium and large device or view point ranges. 0:32 Now, you can create more later if you'd like, but we'll stick with three for now. 0:36 So, let's create our first variable, for the small range and we're gonna call it, 0:41 breakpoint small. 0:46 And the value will be 1 pixel, and right below we'll create our variable for 0:49 the medium devicer viewport range, let's call it, breakpoint medium. 0:54 And this time we'll make the value, 768 pixels. 0:59 And finally, we'll create one more, called breakpoint large, and 1:03 let's make the value for this one, 1100 pixels. 1:09 Okay? So, 1:13 before we move on, let's go over to our console, and tell sass to watch for 1:14 changes in our project by writing the command sass-watch scss colon css. 1:19 So, now we can go ahead and 1:26 save our config file and close it out, since we're all done with it. 1:27 Then we'll move over to our mixins.scss file, 1:31 where we're going to write a conditional media query mixin, 1:35 using those three breakpoint variables we just wrote. 1:38 So right under the BEM selector mixins, let's write our media query mixin, 1:42 by saying @mixin and we'll call it mq. 1:47 And our mixin will take one argument, so 1:52 let's make the argument, the variable break. 1:55 So, in a conditional mix in, we use the if and 2:00 else directives, to set our conditions. 2:03 So, let's use those here, to define conditions for 2:06 each of the three breakpoints. 2:09 So, as our first condition, we'll say, 2:11 if the value passed for break is equal to small. 2:14 Then output the media query we're about to write for the small device range. 2:21 So, inside the if rule, we'll write @media. 2:26 Then we'll define the min-width with the $brkpoint-sm variable. 2:30 [SOUND] And the max-width, with the breakpoint medium variable. 2:35 So again, this will be our small mobile device or view port range, 2:43 from 1 pixel to 768 pixels, as defined by our breakpoint variables. 2:48 And I'm also going to include the content directive, 2:53 that way we're able to pass custom styles to our mixin, when included. 2:57 So, right below our if rule. 3:02 We'll create another condition for our medium, media query breakpoint. 3:04 So, we'll say, else if, the value for break 3:08 is equal to medium, then output the media query for the medium device range. 3:14 So, inside the else if condition, we'll say media, 3:23 min-width, and we'll set the min-width value 3:29 with the breakpoint medium variable, plus 1. 3:34 So if this condition is true, 3:40 it will output that the media query at the 769 pixel breakpoint. 3:42 Since it's adding 1, to our $brkpoint-md value. 3:47 And we'll also want to include the content directive, so 3:51 I'll just go ahead and copy it from the condition above, 3:54 and paste it inside our new medium, media query condition. 3:57 So finally, for the large breakpoint, we'll create a new condition, and 4:02 this time we'll say, else if, the value for 4:07 break is equal to large, then I'll put the media query for 4:12 the large device, or viewport range. 4:17 So, we'll say large, [SOUND] and 4:19 inside we'll write the media query. 4:24 And we'll define the min-width value, with the breakpoint large variable. 4:29 And once again, I'll copy the content directive from above. 4:39 And paste it inside our large media query breakpoint. 4:43 So, while we're at it, let's also add an error message to this mixin, 4:47 just in case a value is passed that isn't small, medium, or large. 4:51 Sass will output an error message in the console, and in the CSS output. 4:55 So right below, we'll create one more, else condition. 5:00 Then inside we'll write our error message, with the error directive. 5:06 So let's have our message say, whoops! 5:11 No value could be, retrieved for break. 5:15 And let's go ahead and use interpolation syntax. 5:22 And inside the curly braces, we'll write our break variable. 5:24