SASS Control Directives 3

Question 1

What is a common use case for `@each` in Sass?

Accepted Answer

Generating theme color classes from a list of color names

Answer

`@each` is commonly used to iterate over color palettes, spacing scales, or any list to generate utility classes.

Question 2

How do you break out of a Sass `@while` loop?

Accepted Answer

Set the loop condition to false

Answer

Sass does not have a `@break` statement; you exit a `@while` loop by making its condition evaluate to false.

Question 3

What does the following Sass produce: `@for $i from 1 through 3 { .mt-#{$i} { margin-top: #{$i * 4}px; } }`?

Accepted Answer

.mt-1 { margin-top: 4px; } .mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; }

Answer

The `@for` loop generates three classes with margin-top values of 4px, 8px, and 12px respectively.

Question 4

Which operator is used for logical AND in Sass `@if` conditions?

Accepted Answer

and

Answer

Sass uses the keyword `and` for logical AND in conditional expressions.

Question 5

How do you check if a variable is null in a Sass `@if` statement?

Accepted Answer

@if $variable == null { }

Answer

Comparing a variable to `null` using `==` in `@if` checks whether the variable has no value.

SASS Practice Test