SASS Control Directives 1 — Questions and Answers
Question 1: Which Sass directive is used for conditional style output?
- @if (Correct answer)
- @when
- @cond
- @check
Correct answer: @if
The `@if` directive evaluates a condition and outputs the enclosed styles only when the condition is true.
Question 2: What is the Sass syntax for an if-else statement?
- @if condition { } @else { } (Correct answer)
- @if condition { } @otherwise { }
- @when condition { } @default { }
- @if (condition) then { } else { }
Correct answer: @if condition { } @else { }
Sass uses `@if` for the condition, `@else if` for additional conditions, and `@else` for the fallback.
Question 3: How do you write a `for` loop in Sass that iterates from 1 to 5 inclusive?
- @for $i from 1 through 5 { } (Correct answer)
- @for $i from 1 to 5 { }
- @loop $i 1..5 { }
- @each $i in 1,2,3,4,5 { }
Correct answer: @for $i from 1 through 5 { }
Using `through` in `@for` includes the end value, so `from 1 through 5` iterates 1, 2, 3, 4, 5.
Question 4: What is the difference between `@for $i from 1 to 5` and `@for $i from 1 through 5`?
- `to` excludes 5; `through` includes 5 (Correct answer)
- `to` includes 5; `through` excludes 5
- They produce the same output
- `to` counts down; `through` counts up
Correct answer: `to` excludes 5; `through` includes 5
In Sass `@for` loops, `to` stops before the end value while `through` includes it.
Question 5: How do you iterate over a list in Sass?
- @each $item in $list { } (Correct answer)
- @for $item of $list { }
- @loop $item from $list { }
- @iterate $item in $list { }
Correct answer: @each $item in $list { }
The `@each` directive iterates over every item in a list or map, assigning each to the loop variable.
Question 6: How do you use `@each` to iterate over a Sass map?
- @each $key, $value in $map { } (Correct answer)
- @each $entry in $map { }
- @for $key: $value in $map { }
- @map-each $key $value in $map { }
Correct answer: @each $key, $value in $map { }
When iterating a map with `@each`, you can destructure key-value pairs using `$key, $value` syntax.
Which Sass directive is used for conditional style output?