Container query preparation in SASS - Mini Project: Build & Apply

Container Query Preparation with Sass

📖 Scenario: You are building a responsive card component that changes its style based on the size of its container, not just the viewport. This is useful for flexible layouts where cards can appear in different sized containers.

🎯 Goal: Create a Sass stylesheet that sets up a container query for a card component. The card should have a base style and a different background color when its container is at least 30rem wide.

📋 What You'll Learn

Use a CSS container class .card-container with the name card-container

Create a card class .card with base styles

Add a container query inside Sass that changes the card background color when the container width is at least 30rem

Use Sass nesting to organize the styles

💡 Why This Matters

🌍 Real World

Container queries let you build components that adapt to their container size, not just the screen size. This is useful in complex layouts like dashboards, widgets, or modular UI where components appear in different sized spaces.

💼 Career

Understanding container queries and Sass nesting is valuable for front-end developers working on modern responsive designs, improving user experience and maintainability.

1

Set up the base card styles

Create a Sass class called .card with these styles: padding: 1rem, border-radius: 0.5rem, and background-color: #f0f0f0.

SASS

.card {
  // Your code here
}

Hint

Use the .card selector and add the styles inside curly braces.

2

Add container declaration

Create a .card-container class with container-type: inline-size and container-name: card-container.

SASS

.card {
  padding: 1rem;
  border-radius: 0.5rem;
  background-color: #f0f0f0;
}

// Your code here

Hint

Create the .card-container selector and add container-type: inline-size; and container-name: card-container; inside it.

3

Write the container query

Inside the .card class, add a container query using @container card-container (min-width: 30rem) that changes the background-color to #d0e6f7.

SASS

.card-container {
  container-type: inline-size;
  container-name: card-container;
}

.card {
  padding: 1rem;
  border-radius: 0.5rem;
  background-color: #f0f0f0;
  // Your code here
}

Hint

Use @container card-container (min-width: 30rem) inside .card and nest the style change.

4

Complete with responsive font size

Add inside the container query a style to set font-size: 1.25rem for the .card.

SASS

.card-container {
  container-type: inline-size;
  container-name: card-container;
}

.card {
  padding: 1rem;
  border-radius: 0.5rem;
  background-color: #f0f0f0;

  @container card-container (min-width: 30rem) {
    background-color: #d0e6f7;
    // Your code here
  }
}

Hint

Inside the container query block, add font-size: 1.25rem; to increase text size.