Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses 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.
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
You need to sign up for Treehouse in order to download course files.
Sign up