Preview
Video Player
00:00
00:00
Nesting Media Queries
6:38Sass lets you nest media queries directly inside the initial rules you're modifying. This keeps media queries local to the original selector, and makes writing and maintaining them easy.
All right, make sure you launch
the Workspace with this video to get
0:00
all the latest files for this lesson.
0:03
In the previous video,
I asked you to practice creating partials
0:05
by breaking mainstyles.scss out
into related chunks of code.
0:08
Well, in the latest Workspace,
you'll see how I organized and
0:13
sorted the partials into
multiple directories for the base
0:16
component and layout styles,
as well as a directory for
0:22
project utilities like variables,
mixins, and proper placeholders.
0:27
And over in style.sass,
0:32
I imported each group of related partials
using a separate import directive.
0:34
Feel free to pause the video and
have a closer look at the partial
0:39
structure before moving
on to media queries.
0:42
Media queries are an important part of
web design in front-end web development
0:45
because they let you adapt the
presentation of your content to a specific
0:49
range of devices and screen sizes without
having to change the content itself.
0:53
Currently, our project uses media queries,
just like you would with regular CSS.
0:58
Now, one way developers managed media
queries in Sass is by creating a partial
1:04
in the layout directory for
each media query break point.
1:08
And one of the benefits of doing
this is that you write and
1:11
edit all your media query
styles in one place.
1:14
Well, when you write media queries this
way, you're also repeating selectors
1:17
by creating separate rules that
refer to the same element.
1:22
Well, Sass's job is to help you
avoid repeating code, right?
1:25
So, you can take advantage
of features like nesting,
1:28
variables and mixins to make media
queries easier to work with.
1:31
So instead of repeating selectors
inside media query rules,
1:36
you nest media queries directly
inside the initial rule.
1:39
And what this does is,
1:43
it keeps media queries local to
the original selector you're modifying.
1:44
And it makes writing and
maintaining them a breeze.
1:47
So, for example, in our components images
partial, there's a media query that hides
1:49
the display of the featured image when
a view port is 575 pixels or narrower.
1:56
And in the layout containers partial,
there's a media query that centers
2:02
the main content container when the view
port is 760 pixels or wider and below
2:07
that, a media query that sets the intro
divs width to 45 percent, at 992 pixels.
2:12
So now,
let's take full advantage of nesting
2:18
to keep all related styles
within the same selector.
2:21
So first, go over to the components
folder and open the file images.scss.
2:23
Then nest the media query that sets
the images display to none directly
2:29
inside the image featured rule.
2:34
Now remove the image featured selector and
curly braces inside the media query,
2:42
leaving the display none declaration only.
2:47
Next, open the file containers.
2:52
.scss inside the layout directory.
2:55
Then, at the top of the file,
I'll go ahead and cut and
3:00
paste the media query that adjusts
main-content's layout at 768 pixels,
3:04
directly inside the main-content rule.
3:10
Then once again delete the main content
selector in curly braces inside
3:14
the media query.
3:18
And while we're working in this file,
let's scroll down and
3:25
nest the media query for
the intro container.
3:29
So, by nesting the media queries,
3:45
we're doing all the styling
within the same selectors.
3:46
Some are just under a different context.
3:47
So now, when you save and
compile the latest changes,
3:55
you'll see that Sass outputs each
nested media query as a separate rule.
3:58
So they get bubbled up to the root
level of the style sheet,
4:03
just like nested selectors do.
4:05
Now, if your project requires
lots of media queries,
4:13
you can avoid repeating the same min width
or max width values in your media query
4:16
expressions by creating variables for
them.
4:21
So go ahead and open the variables
partial inside the utilities folder, and
4:25
at the bottom of the file, let's declare
a variable for each break point value.
4:31
So first, I'll write a comment for
my break points, and
4:35
we'll start with the variable break dash
xs, for the extra-small break point.
4:39
And we'll set the value to 575 pixels,
right below,
4:45
we'll create the variable break dash s.
4:50
Set this value to 576 pixels.
4:54
Then we'll create break dash M for
medium break points.
4:56
Set it to 768 pixels.
5:01
And finally,
5:03
break-l, which will be 992 pixels.
5:07
So by storing the values in variables,
5:13
we're able to configure all our media
query break points in one place.
5:16
Now, let's include a variable
in place of the repeated value.
5:20
So, we'll first replace
the max-width value
5:23
of the image-featured rule
with the variable break-xs.
5:27
Give that a save.
5:34
And then, back in my containers partial,
I'll scroll up and
5:36
replace main content's break
point value with break-m.
5:42
Then, right below, we place the intro
rules min width value of 992 pixels,
5:47
with our break-l variable.
5:53
All right, so let's give this a save.
5:58
And have a look in the browser to make
sure our layout still looks good.
5:59
And it looks like our layout is still
adjusting to all break points as expected,
6:07
perfect.
6:12
So next, why don't you try nesting
the remaining media queries for card and
6:18
header using the break point
variables we just created?
6:23
You can see how I added the media queries
when you download the project files with
6:27
this video.
6:32
In a later video,
I'll teach you a more advanced and
6:32
efficient way to manage your
media queries with mixins.
6:35