Container query preparation in SASS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to declare a container query in Sass.

SASS

@container [1] (min-width: 30rem) {
  color: blue;
}

Drag options to blanks, or click blank then click option'

Ascope

Bquery

Cstyle

Dcontainer

Attempts:

3 left

💡 Hint

Common Mistakes

Using '@query' or '@style' instead of '@container'.

Forgetting the '@' symbol.

The @container rule is used to start a container query block in Sass.

2fill in blank

medium

Complete the code to define a container with a name for queries.

SASS

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

Drag options to blanks, or click blank then click option'

A"main"

B'main'

Cmain

Dcontainer

Attempts:

3 left

💡 Hint

Common Mistakes

Putting quotes around the container name.

Using a reserved word like 'container'.

The container name must be an unquoted identifier (<custom-ident>), so use main without quotes.

3fill in blank

hard

Fix the error in the container query syntax.

SASS

@container (min-width [1] 40rem) {
  background: lightgray;
}

Drag options to blanks, or click blank then click option'

A=

B:

C>

D<

Attempts:

3 left

💡 Hint

Common Mistakes

Using '=' or '>' instead of ':'.

Leaving out the colon.

The correct syntax for container queries uses a colon ':' between the feature and value.

4fill in blank

hard

Fill both blanks to create a container query that applies styles when the container's width is less than 50rem.

SASS

@container [1] ([2]: 50rem) {
  font-size: 1.2rem;
}

Drag options to blanks, or click blank then click option'

Acontainer

Bmax-width

Cmin-width

Dquery

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'min-width' instead of 'max-width' for less than conditions.

Using '@query' instead of '@container'.

The @container rule starts the query, and max-width means styles apply when width is less than the value.

5fill in blank

hard

Fill both blanks to create a container query that applies styles when the container named 'sidebar' has a width greater than 20rem.

SASS

@container (container-name: [1] && [2]: 20rem) {
  padding: 1rem;
}

Drag options to blanks, or click blank then click option'

Acontainer

Bsidebar

Cmin-width

Dmax-width

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting the container-name condition.

Using quotes around container name.

Using 'max-width' instead of 'min-width' for greater than conditions.

Use (container-name: sidebar && min-width: 20rem); the container name is an unquoted identifier, and min-width targets widths greater than or equal to the value. Combine conditions with &&.