CSS Preprocessors

Imagine writing a long book. If you write it on an old typewriter, you have to type every page manually. If you make a spelling error or want to change a character name later, you have to search and retype those sections manually. Now, imagine using a smart word processor on your computer. You can use copy-paste, find-and-replace, variables, and automated chapters. It is much faster and cleaner. CSS preprocessors (like Sass) are those smart word processors. They extend CSS with programming-like features (like variables, nested selectors, and reusable code blocks), compiling them into standard CSS that browsers can read.

In this page:

Preprocessors vs. Native CSS
Preprocessor Nesting
Preprocessor Mixins
Preprocessor Variables
Preprocessor File Imports

Preprocessors vs. Native CSS

CSS Preprocessors (like Sass, Less, or Stylus) are scripting languages that extend CSS with advanced features like nesting, variables, and mixins. You write your code in preprocessor syntax, which is compiled into standard CSS that browsers can read.

Note: Use a compiler (like Dart Sass) inside your project editor to compile your preprocessor files automatically.

Warning: Browsers cannot read preprocessor files directly; they must always be compiled into standard .css files.

Example: Preprocessors vs. Native CSS

css

<!-- SCSS source (needs a preprocessor):
$color: teal;
p {
  color: $color;
}
-->
<style>
p { color: teal; }
</style>
<p>Compiled output: teal text</p>

Preprocessor Nesting

Preprocessors allow you to nest your CSS selectors inside each other, matching the nesting structure of your HTML tags, keeping your code organized and reducing repetitive selector paths.

Note: Keep your nesting depth under three levels to prevent generating bloated, overly specific CSS.

Warning: Deeply nested selectors can result in high specificity scores that make overriding styles difficult.

Example: Preprocessor Nesting

css

<style>
.card .title { font-weight: bold; }
.card { border: 2px solid #1e6fd9; padding: 12px; width: 200px; }
.card {
  .title {
    font-weight: bold;
  }
}
</style>
<!-- Nested SCSS compiled to plain CSS below -->
<div class="card"><p class="title">Card title</p></div>

Preprocessor Mixins

Mixins are reusable blocks of CSS code that you can define once and include inside other selectors, preventing repetitive style rules and keeping your stylesheets DRY (Don't Repeat Yourself).

Note: Use mixins with parameters to build customizable styling blocks like buttons of different sizes.

Warning: Overusing heavy mixins can bloat your compiled CSS file size, so use them carefully.

Example: Preprocessor Mixins

css

<!-- SCSS source (needs a preprocessor):
@mixin button($bg) {
  background: $bg;
  padding: 10px 20px;
}
.btn {
  @include button(royalblue);
}
-->
<style>
.btn { background: royalblue; padding: 10px 20px; border: 0; color: white; }
</style>
<button class="btn">Button</button>

Preprocessor Variables

Preprocessors were the first to introduce variables to CSS. Preprocessor variables are static; they are replaced with their actual values during compilation and cannot be updated dynamically inside the browser's DOM like native CSS variables.

Note: Use preprocessor variables for static layout configurations, and native CSS variables for dynamic themes like dark mode.

Warning: Preprocessor variables do not live inside the DOM, so you cannot read or modify them using JavaScript.

Example: Preprocessor Variables

css

<!-- SCSS source (needs a preprocessor):
$spacing: 16px;
.box {
  padding: $spacing;
}
-->
<style>
.box { padding: 16px; background: #cfe8ff; border: 2px solid #1e6fd9; }
</style>
<div class="box">Padding from a variable</div>

Preprocessor File Imports

Preprocessors allow you to split your stylesheets into separate, modular files (like _buttons.scss or _theme.scss) and import them into a single, main stylesheet file using the @use or @import rules, keeping your project organized and easy to maintain.

Note: Start your partial file names with an underscore (like _buttons.scss) to tell the compiler not to compile them into separate CSS files.

Warning: Modern preprocessors recommend using @use instead of @import to prevent variable namespace conflicts.

Example: Preprocessor File Imports

css

<!-- SCSS source (needs a preprocessor):
@use 'buttons';
@use 'theme';
-->
<style>
.btn { background: royalblue; color: white; border: 0; padding: 10px 20px; }
</style>
<button class="btn">Styles from the imported files</button>

Chapter Quiz — Complete all 25 topics to unlock

0/25 topics done

Complete these topics first:

← Previous Lesson CSS Performance Next Lesson → CSS Frameworks Overview