Media query mixin patterns in SASS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a media query mixin in Sass?

A media query mixin in Sass is a reusable block of code that helps you write media queries easily by wrapping CSS rules inside a function-like structure. It makes your styles cleaner and easier to maintain.

beginner

How do you define a simple media query mixin for a max-width of 600px?

@mixin max-width-600 { @media (max-width: 600px) { @content; } } This mixin wraps any CSS passed inside it with a max-width 600px media query.

intermediate

Why use media query mixins instead of writing media queries directly?

Using mixins avoids repeating the same media query code. It keeps your CSS DRY (Don't Repeat Yourself), makes updates easier, and improves readability by giving meaningful names to breakpoints.

intermediate

Show an example of a responsive font size using a media query mixin.

@mixin respond-to($breakpoint) { @if $breakpoint == small { @media (max-width: 600px) { @content; } } } p { font-size: 1.6rem; @include respond-to(small) { font-size: 1.2rem; } } This changes paragraph font size on small screens.

beginner

What is the role of @content inside a Sass mixin for media queries?

@content is a placeholder inside a mixin where you put the CSS rules that should be wrapped by the media query. It lets you insert custom styles when you use the mixin.

What does the @content directive do inside a Sass mixin?

A Ends the mixin

B Defines a new variable

C Starts a media query

D Inserts the CSS rules passed to the mixin

@content inserts the CSS rules you write inside the mixin call, wrapping them as needed.

Which of these is a correct way to write a media query mixin for max-width 768px?

A @mixin mq { @media (max-width: 768px) { @content; } }

B @mixin mq { max-width: 768px { @content; } }

C @mixin mq { @media max-width: 768px { @content; } }

D @mixin mq { @media (min-width: 768px) { @content; } }

Option A correctly uses @media with parentheses and @content inside the mixin.

Why are media query mixins helpful in Sass?

A They allow reusing media queries easily

B They make CSS slower

C They replace HTML tags

D They remove the need for CSS

Mixins help reuse media queries, making code cleaner and easier to update.

How do you include a mixin named 'mobile' in Sass?

A @use mobile;

B @import mobile;

C @include mobile;

D @mixin mobile;

You use @include followed by the mixin name to apply it.

What is the main advantage of naming media query mixins like 'small-screen' or 'tablet'?

A Makes CSS load faster

B Makes code easier to understand and maintain

C Changes HTML structure

D Removes the need for media queries

Meaningful names help you and others know what screen size the styles target.

Explain how to create and use a media query mixin in Sass for responsive design.

Think about wrapping CSS inside a function-like block that applies only on certain screen sizes.

Describe the benefits of using media query mixins compared to writing media queries directly in your Sass files.

Consider how repeating the same media query over and over can be avoided.