Suggest an edit

Improve this article

Refine the answer for “What does @if do in SCSS?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

`@if` in SCSS is a conditional branching directive that lets you execute different blocks of code depending on a given condition. It resembles a conditional operator in programming languages and is applied inside the preprocessor before compilation, affecting which styles end up in the final CSS.

### Example

```scss
$theme: dark;

@if $theme == dark {
  body {
    background: #111;
    color: #fff;
  }
} @else {
  body {
    background: #fff;
    color: #111;
  }
}
```

Only one variant makes it into the final CSS: the one whose block passed the condition.

---

### Where this is useful

1. **Dark/light theme**
2. **Generating different grids for different parameters**
3. **Creating responsive styles for project configurations**
4. **Optimizing the final CSS by excluding unneeded code**

---

### The key meaning of `@if`

It lets you add simple logic to SCSS, making styles more dynamic and manageable, without duplicating identical blocks.

Ready to keep going in this same format. Let me know when you ask the next question.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts165 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.