Sass Control Directives: @if, @for, @each Quiz Quiz

Assess your knowledge of Sass control directives with a quiz focusing on the syntax, logic, and practical uses of @if, @for, and @each statements in stylesheet preprocessing. Strengthen your grasp of conditional logic and looping constructs in Sass to enhance your CSS coding efficiency.

1. Using @if to Set Conditional Styles

   In Sass, which of the following statements correctly uses the @if directive to apply a green background only when a variable $theme is 'success'?

   1. @if ($theme = success) { background: green; }
   2. @if: $theme == 'success' { background: green; }
   3. @if $theme == 'success' { background: green; }
   4. @if $theme = 'success' { background: green; }

   Explanation: The correct answer uses the proper Sass syntax for @if: '==', no parentheses, and correct placement of the condition and block. Option A is incorrect because it uses a single '=', which is an assignment operator, not a comparison. Option C incorrectly omits quotes and uses parentheses in an invalid way. Option D adds a colon after @if, which is not valid Sass syntax.

2. The Range of @for Loops

   What will be the output of the Sass code '@for $i from 1 through 3' in terms of loop iterations?

   1. It will not run any iterations.
   2. It will loop for values 1, 2, 3, and 4.
   3. It will loop for values 2 and 3 only.
   4. It will loop for values 1, 2, and 3.

   Explanation: @for $i from 1 through 3 runs the loop for values 1, 2, and 3, as 'through' includes the end value. Option B is incorrect because it falsely includes a value (4) outside the specified range. Option C is incorrect since the loop starts at 1, not 2. Option D is wrong because the loop does execute three times according to these bounds.

3. Syntax Error Detection in @each

   Which of the following @each loops contains a syntax error for iterating through a color list?

   1. @each $color in red, blue, green { color: $color; }
   2. @each $color in (red blue green) { color: $color; }
   3. @each $color in (red, blue, green) { color: $color; }
   4. @each $color of (red, blue, green) { color: $color; }

   Explanation: The correct answer is '@each $color of (red, blue, green) { color: $color; }' because the 'of' keyword is not valid; 'in' should be used in Sass. Option A, B, and D use different ways of listing items but valid syntax. Option D uses a space-separated list, which is also acceptable in Sass.

4. Nested @if within @each Loops

   When using a nested @if inside an @each loop in Sass to apply a $primary color class, which comparison operator is correct to check for equality?

   1. =
   2. ===
   3. ==
   4. !=

   Explanation: In Sass, the correct comparison operator for equality in an @if directive is '=='. Option A, '===', is not supported in Sass and is a strict equality operator in some programming languages. Option C uses '=', which is for assignment, not comparison. Option D, '!=', checks for inequality rather than equality.

5. Destructuring Lists in @each Loops

   Given the Sass code '@each $fruit, $color in (apple red, banana yellow, grape purple)', what will each loop iteration assign to $fruit and $color?

   1. $fruit gets the fruit name, and $color gets the corresponding color for each iteration.
   2. $fruit will receive both values, and $color will remain undefined.
   3. $fruit and $color will each be assigned a pair of all fruits and all colors.
   4. Syntax error, as destructuring in @each is not allowed.

   Explanation: With destructuring in @each, each variable receives the respective values from the nested lists in order, correctly assigning $fruit to the fruit name and $color to its color. Option A is incorrect since the pairing is not of all fruits with all colors. Option C is false; both variables are properly assigned. Option D is incorrect as Sass allows destructuring in @each loops.