Suggest an edit

Improve this article

Refine the answer for “What is a CSS preprocessor?”. 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)

A CSS preprocessor is a tool that extends the capabilities of ordinary CSS by adding variables, functions, calculations, selector nesting, and other "programming" features. The preprocessor then **compiles its own code into ordinary CSS** that browsers understand.

---

### **Why it's needed**

- simplifies maintaining large CSS files
- allows code reuse
- helps write styles faster and in a more structured way

---

### **What is added on top of ordinary CSS**

| Feature | Example |
|---|---|
| variables | `@color: #333;` |
| nesting | selectors inside selectors |
| mixins | reusable blocks of code |
| functions | calculations (`100% - 20px`) |
| imports | splitting styles into modules |

---

### **Popular preprocessors**

- **Sass (SCSS)**
- **LESS**
- **Stylus**

**Sass/SCSS** is used most often, it's the de facto standard.

---

### **Example (SCSS → CSS)**

**SCSS:**

```scss
$main: #3498db;

button {
  color: $main;
  &:hover {
    color: darken($main, 10%);
  }
}
```

**Compiled CSS:**

```css
button {
  color: #3498db;
}
button:hover {
  color: #2b7cad;
}
```

---

**Summary:** a preprocessor is a layer on top of CSS that makes the code more convenient and powerful, but ultimately still turns into standard CSS that the browser executes.

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.