Now that we're using a lot of

media queries to define breakpoints in our project, let's create a mixin,

that will help make our media queries easier to use and maintain.

So, again, like we've done with our colors, textiles grid system and

pretty much everything else, we're first going to configure all of

our media query breakpoints in the config.sess partial.

So, all the way at the bottom of our file, right beneath the comment for

breakpoints, we're going to create variables for

the small, medium and large device or view point ranges.

Now, you can create more later if you'd like, but we'll stick with three for now.

So, let's create our first variable, for the small range and we're gonna call it,

breakpoint small.

And the value will be 1 pixel, and right below we'll create our variable for

the medium devicer viewport range, let's call it, breakpoint medium.

And this time we'll make the value, 768 pixels.

And finally, we'll create one more, called breakpoint large, and

let's make the value for this one, 1100 pixels.

Okay? So,

before we move on, let's go over to our console, and tell sass to watch for

changes in our project by writing the command sass-watch scss colon css.

So, now we can go ahead and

save our config file and close it out, since we're all done with it.

Then we'll move over to our mixins.scss file,

where we're going to write a conditional media query mixin,

using those three breakpoint variables we just wrote.

So right under the BEM selector mixins, let's write our media query mixin,

by saying @mixin and we'll call it mq.

And our mixin will take one argument, so

let's make the argument, the variable break.

So, in a conditional mix in, we use the if and

else directives, to set our conditions.

So, let's use those here, to define conditions for

each of the three breakpoints.

So, as our first condition, we'll say,

if the value passed for break is equal to small.

Then output the media query we're about to write for the small device range.

So, inside the if rule, we'll write @media.

Then we'll define the min-width with the $brkpoint-sm variable.

[SOUND] And the max-width, with the breakpoint medium variable.

So again, this will be our small mobile device or view port range,

from 1 pixel to 768 pixels, as defined by our breakpoint variables.

And I'm also going to include the content directive,

that way we're able to pass custom styles to our mixin, when included.

So, right below our if rule.

We'll create another condition for our medium, media query breakpoint.

So, we'll say, else if, the value for break

is equal to medium, then output the media query for the medium device range.

So, inside the else if condition, we'll say media,

min-width, and we'll set the min-width value

with the breakpoint medium variable, plus 1.

So if this condition is true,

it will output that the media query at the 769 pixel breakpoint.

Since it's adding 1, to our $brkpoint-md value.

And we'll also want to include the content directive, so

I'll just go ahead and copy it from the condition above,

and paste it inside our new medium, media query condition.

So finally, for the large breakpoint, we'll create a new condition, and

this time we'll say, else if, the value for

break is equal to large, then I'll put the media query for

the large device, or viewport range.

So, we'll say large, [SOUND] and

inside we'll write the media query.

And we'll define the min-width value, with the breakpoint large variable.

And once again, I'll copy the content directive from above.

And paste it inside our large media query breakpoint.

So, while we're at it, let's also add an error message to this mixin,

just in case a value is passed that isn't small, medium, or large.

Sass will output an error message in the console, and in the CSS output.

So right below, we'll create one more, else condition.

Then inside we'll write our error message, with the error directive.

So let's have our message say, whoops!

No value could be, retrieved for break.

And let's go ahead and use interpolation syntax.

And inside the curly braces, we'll write our break variable.