"Python Basics (2015)" was retired on June 22, 2018. 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
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.
This video doesn't have any notes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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 upYou need to sign up for Treehouse in order to set up Workspace
Sign up