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 &&.

Practice

1. What is the main purpose of using @container in Sass?

easy

A. To reset all container styles

B. To create animations for containers

C. To define variables inside containers

D. To apply styles based on the size of an element's container

Solution

1. Step 1: Understand container queries

   Container queries allow styling elements depending on their container's size, not the viewport.

2. Step 2: Role of @container in Sass

   The @container rule in Sass is used to write container queries clearly and apply styles conditionally based on container size.

3. Final Answer:

   To apply styles based on the size of an element's container -> Option D

4. Quick Check:

   Container queries = style by container size [OK]

Hint: Remember: @container styles depend on container size, not viewport [OK]

Common Mistakes:

• Confusing container queries with media queries
• Thinking @container creates animations
• Using @container to define variables

2. Which CSS property must be set on a container element to enable container queries in Sass?

easy

A. container-type

B. container-size

C. container-query

D. container-style

Solution

1. Step 1: Identify container query activation property

   To use container queries, the container must declare container-type to enable size-based queries.

2. Step 2: Verify other options

   container-size, container-query, and container-style are not valid CSS properties for this purpose.

3. Final Answer:

   container-type -> Option A

4. Quick Check:

   Enable container queries = container-type [OK]

Hint: Set container-type to activate container queries on an element [OK]

Common Mistakes:

• Using non-existent properties like container-query
• Confusing container-type with container-size
• Forgetting to set container-type on the container

3. Given the Sass code below, what background color will the .box have if its container width is 500px?

@container (min-width: 600px) {
  .box {
    background-color: blue;
  }
}
.box {
  background-color: red;
}

medium

A. Blue

B. Red

C. No background color

D. Green

Solution

1. Step 1: Understand the container query condition

   The container query applies styles only if the container's width is at least 600px.

2. Step 2: Check container width against condition

   The container width is 500px, which is less than 600px, so the container query block does not apply.

3. Step 3: Determine fallback style

   The .box outside the container query has background-color: red;, so this style applies.

4. Final Answer:

   Red -> Option B

5. Quick Check:

   Container width 500px < 600px = red background [OK]

Hint: Check container width against min-width condition to pick color [OK]

Common Mistakes:

• Assuming container query applies regardless of container size
• Confusing container width with viewport width
• Ignoring fallback styles outside @container

4. Identify the error in the following Sass container query code:

@container (max-width 400px) {
  .card {
    padding: 1rem;
  }
}

medium

A. Container queries cannot use max-width

B. Incorrect selector inside @container

C. Missing colon after max-width

D. Padding value should be in px, not rem

Solution

1. Step 1: Check container query syntax

   The condition inside @container must have a colon after the property name, e.g., max-width: 400px.

2. Step 2: Verify other options

   The selector .card is valid, padding in rem is allowed, and max-width is a valid container query condition.

3. Final Answer:

   Missing colon after max-width -> Option C

4. Quick Check:

   Container query conditions need colons [OK]

Hint: Always use colon after property in container query conditions [OK]

Common Mistakes:

• Omitting colon in container query conditions
• Thinking max-width is invalid in container queries
• Confusing units for padding

5. You want to style a .card component differently when its container is narrower than 300px or wider than 700px using Sass container queries. Which of the following is the correct way to write this?

hard

A. @container (max-width: 300px), (min-width: 700px) { .card { font-size: 1.2rem; } }

B. @container (max-width: 300px) and (min-width: 700px) { .card { font-size: 1.2rem; } }

C. @container (max-width 300px), (min-width 700px) { .card { font-size: 1.2rem; } }

D. @container (width < 300px), (width > 700px) { .card { font-size: 1.2rem; } }

Solution

1. Step 1: Understand container query syntax for multiple conditions

   Multiple conditions separated by commas mean OR logic. Use colons after properties.

2. Step 2: Analyze each option

   @container (max-width: 300px), (min-width: 700px) { .card { font-size: 1.2rem; } } correctly uses commas and colons. @container (max-width: 300px) and (min-width: 700px) { .card { font-size: 1.2rem; } } uses AND which requires both conditions simultaneously (impossible here). @container (max-width 300px), (min-width 700px) { .card { font-size: 1.2rem; } } misses colons. @container (width < 300px), (width > 700px) { .card { font-size: 1.2rem; } } uses invalid syntax with < and >.

3. Final Answer:

   @container (max-width: 300px), (min-width: 700px) { .card { font-size: 1.2rem; } } -> Option A

4. Quick Check:

   Use commas for OR, colons after properties [OK]

Hint: Use commas for OR conditions and colons after properties [OK]

Common Mistakes:

• Using 'and' instead of commas for OR conditions
• Omitting colons in conditions
• Using invalid operators like < or > in container queries