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