All right, make sure you launch the Workspace with this video to get

all the latest files for this lesson.

In the previous video, I asked you to practice creating partials

by breaking mainstyles.scss out into related chunks of code.

Well, in the latest Workspace, you'll see how I organized and

sorted the partials into multiple directories for the base

component and layout styles, as well as a directory for

project utilities like variables, mixins, and proper placeholders.

And over in style.sass,

I imported each group of related partials using a separate import directive.

Feel free to pause the video and have a closer look at the partial

structure before moving on to media queries.

Media queries are an important part of web design in front-end web development

because they let you adapt the presentation of your content to a specific

range of devices and screen sizes without having to change the content itself.

Currently, our project uses media queries, just like you would with regular CSS.

Now, one way developers managed media queries in Sass is by creating a partial

in the layout directory for each media query break point.

And one of the benefits of doing this is that you write and

edit all your media query styles in one place.

Well, when you write media queries this way, you're also repeating selectors

by creating separate rules that refer to the same element.

Well, Sass's job is to help you avoid repeating code, right?

So, you can take advantage of features like nesting,

variables and mixins to make media queries easier to work with.

So instead of repeating selectors inside media query rules,

you nest media queries directly inside the initial rule.

And what this does is,

it keeps media queries local to the original selector you're modifying.

And it makes writing and maintaining them a breeze.

So, for example, in our components images partial, there's a media query that hides

the display of the featured image when a view port is 575 pixels or narrower.

And in the layout containers partial, there's a media query that centers

the main content container when the view port is 760 pixels or wider and below

that, a media query that sets the intro divs width to 45 percent, at 992 pixels.

So now, let's take full advantage of nesting

to keep all related styles within the same selector.

So first, go over to the components folder and open the file images.scss.

Then nest the media query that sets the images display to none directly

inside the image featured rule.

Now remove the image featured selector and curly braces inside the media query,

leaving the display none declaration only.

Next, open the file containers.

.scss inside the layout directory.

Then, at the top of the file, I'll go ahead and cut and

paste the media query that adjusts main-content's layout at 768 pixels,

directly inside the main-content rule.

Then once again delete the main content selector in curly braces inside

the media query.

And while we're working in this file, let's scroll down and

nest the media query for the intro container.

So, by nesting the media queries,

we're doing all the styling within the same selectors.

Some are just under a different context.

So now, when you save and compile the latest changes,

you'll see that Sass outputs each nested media query as a separate rule.

So they get bubbled up to the root level of the style sheet,

just like nested selectors do.

Now, if your project requires lots of media queries,

you can avoid repeating the same min width or max width values in your media query

expressions by creating variables for them.

So go ahead and open the variables partial inside the utilities folder, and

at the bottom of the file, let's declare a variable for each break point value.

So first, I'll write a comment for my break points, and

we'll start with the variable break dash xs, for the extra-small break point.

And we'll set the value to 575 pixels, right below,

we'll create the variable break dash s.

Set this value to 576 pixels.

Then we'll create break dash M for medium break points.

Set it to 768 pixels.

And finally,

break-l, which will be 992 pixels.

So by storing the values in variables,

we're able to configure all our media query break points in one place.

Now, let's include a variable in place of the repeated value.

So, we'll first replace the max-width value

of the image-featured rule with the variable break-xs.

Give that a save.

And then, back in my containers partial, I'll scroll up and

replace main content's break point value with break-m.

Then, right below, we place the intro rules min width value of 992 pixels,

with our break-l variable.

All right, so let's give this a save.

And have a look in the browser to make sure our layout still looks good.

And it looks like our layout is still adjusting to all break points as expected,

perfect.

So next, why don't you try nesting the remaining media queries for card and

header using the break point variables we just created?

You can see how I added the media queries when you download the project files with

this video.

In a later video, I'll teach you a more advanced and

efficient way to manage your media queries with mixins.