@if conditional logic in SASS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does the @if directive do in Sass?

The @if directive lets you write conditional code in Sass. It runs certain styles only if a condition is true.

beginner

How do you write an @if statement in Sass?

You write @if (condition) { /* styles here */ }. The styles inside run only if the condition is true.

beginner

Can you use @else with @if in Sass? What does it do?

Yes. @else runs styles if the @if condition is false. It helps handle two cases clearly.

beginner

Example: What will this Sass code output?<br>

@if 5 > 3 { color: blue; }

Since 5 is greater than 3, the condition is true. The output CSS will be:<br>

color: blue;

intermediate

Why use @if in Sass instead of plain CSS?

CSS alone can't do conditions. Sass @if lets you write smarter styles that change based on variables or logic, saving time and code.

What happens if the @if condition is false and there is no @else?

A The styles inside <code>@if</code> are skipped.

B The styles inside <code>@if</code> run anyway.

C Sass throws an error.

D The styles inside <code>@if</code> run twice.

If the condition is false and no @else is provided, Sass skips the styles inside the @if block.

Which of these is a valid Sass @if condition?

A @if (5 > 3) { ... }

B @if color = blue { ... }

C @if (color == blue) { ... }

D @if (font-size > 12px) { ... }

Sass supports numeric comparisons like 5 > 3. Option C is invalid because 'color' is undefined (though == is valid for equality), B uses = which is assignment, and D compares undefined 'font-size'.

What keyword do you use to add a fallback style if @if condition is false?

A @elseif

B @else

C @otherwise

D @fallback

@else runs styles when the @if condition is false.

Can you nest @if statements inside each other in Sass?

A No, nesting is not allowed.

B Only one level of nesting is allowed.

C Yes, nesting <code>@if</code> is allowed.

D Only with <code>@else</code>.

Sass allows nesting @if statements inside each other for complex conditions.

What will this Sass code output?<br>

$size: 10px; @if $size > 5px { font-size: $size; }

A Error because of wrong syntax.

B No output because variables can't be compared.

C font-size: 5px;

D font-size: 10px;

The variable $size is 10px, which is greater than 5px, so the condition is true and outputs font-size: 10px;.

Explain how the @if directive works in Sass and give a simple example.

Think about how you decide to do something only if a condition is met.

Describe the difference between @if and @else in Sass conditional logic.

Consider how you choose between two options based on a yes/no question.