Introduction

CSS preprocessors add features that regular CSS doesn't have: variables, functions, mixins, nesting, imports, and more. They compile into normal CSS but make development much faster and cleaner. The most popular preprocessors are Sass/SCSS, Less, and Stylus.

1. Sass / SCSS

The industry standard. SCSS syntax looks like normal CSS.

// Variables
$primary: #64b5f6;

button {
  background: $primary;
  padding: 10px;
}
    

Nesting:

nav {
  a {
    color: white;

    &:hover {
      color: #64b5f6;
    }
  }
}
    

2. Less

Similar to Sass but slightly different syntax.

// Variables
@primary: #64b5f6;

button {
  background: @primary;
}
    

3. Stylus

Super minimal syntax.

primary = #64b5f6

button
  background primary
  padding 10px
    

4. Why Use Preprocessors?

• Variables (themes, colors, spacing)
• Nesting (cleaner structure)
• Mixins (reusable snippets)
• Functions (math, colors)
• Imports (split files)
• Cleaner, more organized CSS

5. Mixins Example (SCSS)

@mixin center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.box {
  @include center;
}
    

6. Functions in SCSS

$size: 10px;

.box {
  width: $size * 5;
}
    

7. File Imports

// main.scss
@import "buttons";
@import "layout";
    

8. Compiling to CSS

You must compile preprocessors to real CSS:

sass styles.scss styles.css
lessc styles.less styles.css
stylus styles.styl
    

9. Preprocessors vs CSS Variables

Sass variables are compile-time.
CSS variables are runtime (browser-controlled).

:root {
  --primary: #64b5f6;
}
    

10. When to Use Preprocessors

• Large projects with lots of styles
• When you need reusable mixins/functions
• When your CSS structure gets complex
• For design systems and themes

Summary

• Sass/SCSS is the most popular and feature-rich
• Less and Stylus are similar alternatives
• Preprocessors add variables, nesting, mixins, imports
• They compile to CSS
• Perfect for large, organized, professional projects