SASS Control Directives 2 — Questions and Answers
Question 1: What does the Sass `@while` directive do?
- Repeats a block as long as a condition remains true (Correct answer)
- Pauses compilation until a condition is met
- Creates an animation loop
- Waits for a variable to be defined
Correct answer: Repeats a block as long as a condition remains true
The `@while` directive repeatedly evaluates and outputs its block as long as the given condition is truthy.
Question 2: How do you use the `if()` function (inline conditional) in Sass?
- if($condition, $true-value, $false-value) (Correct answer)
- @if $condition { value } @else { value }
- condition ? true-value : false-value
- switch($condition, $true, $false)
Correct answer: if($condition, $true-value, $false-value)
The `if()` function is a ternary-style built-in that returns the second or third argument based on the condition.
Question 3: What does `@debug` do in Sass?
- Prints a value to the standard error output during compilation (Correct answer)
- Adds a CSS comment in the output
- Pauses compilation for inspection
- Logs the compiled CSS
Correct answer: Prints a value to the standard error output during compilation
`@debug` outputs a message to the Sass compiler's error stream, useful for inspecting variable values.
Question 4: What is the purpose of `@warn` in Sass?
- Outputs a warning message to the compiler output without stopping compilation (Correct answer)
- Throws a compilation error
- Marks a block as deprecated
- Suppresses style output
Correct answer: Outputs a warning message to the compiler output without stopping compilation
`@warn` prints a warning message during compilation but allows the build to continue.
Question 5: What does `@error` do in Sass?
- Throws a fatal error that stops compilation (Correct answer)
- Logs an error to the CSS output as a comment
- Marks a rule as invalid
- Skips the current block
Correct answer: Throws a fatal error that stops compilation
`@error` halts Sass compilation immediately and displays the provided message as a fatal error.
Question 6: How do you generate CSS class names dynamically using a Sass `@for` loop?
- Use interpolation: `.col-#{$i} { width: $i * 10%; }` (Correct answer)
- Use concatenation: `.col-$i { }`
- Use the `class()` function
- Use `@generate .col-$i { }`
Correct answer: Use interpolation: `.col-#{$i} { width: $i * 10%; }`
Sass interpolation `#{}` inside selectors allows dynamic class name generation inside loops.
SASS Control Directives 2
What does the Sass `@while` directive do?