Container query preparation in SASS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a container query in CSS?

A container query lets you apply styles to an element based on the size of its container, not the whole viewport. It helps make components adapt to their space.

beginner

How do you declare a container in CSS for container queries?

Use container-type property on the parent element. For example, container-type: inline-size; makes the container track its inline size (width in horizontal writing modes).

intermediate

Why prepare your Sass code for container queries?

Preparing Sass helps organize styles, reuse code, and easily add container queries later without rewriting everything.

intermediate

What Sass feature helps you write container queries cleanly?

Sass mixins let you write container query blocks once and reuse them with different parameters for cleaner code.

beginner

How do container queries improve responsive design compared to media queries?

Container queries respond to the container's size, so components adapt wherever they are used, not just based on the whole screen size like media queries.

Which CSS property defines a container for container queries?

A query-container

B container-query

C container-type

D container-style

The correct property to declare a container is container-type.

What does container-type: inline-size; do?

A Tracks the container's width for queries

B Tracks the container's height for queries

C Disables container queries

D Sets container background color

inline-size tracks the container's inline size (width in horizontal writing modes), enabling queries based on width.

Why use Sass mixins for container queries?

A To create animations

B To disable container queries

C To write JavaScript inside CSS

D To reuse container query styles easily

Mixins help reuse container query styles without repeating code.

Container queries respond to which size?

A Container size

B Viewport size

C Font size

D Screen resolution

Container queries respond to the size of the container element.

Which is NOT a benefit of container queries?

A Components adapt to container size

B Styles depend on viewport only

C Better modular design

D More flexible responsive layouts

Container queries do NOT depend only on viewport size; that is media queries.

Explain how to prepare Sass code for container queries in a project.

Think about how Sass features help manage container queries.

Describe the difference between container queries and media queries.

Focus on what triggers the style changes.