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

$color: teal;
p {
  color: $color;
}

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

.card {
  .title {
    font-weight: bold;
  }
}

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

@mixin button($bg) {
  background: $bg;
  padding: 10px 20px;
}
.btn {
  @include button(royalblue);
}

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

$spacing: 16px;
.box {
  padding: $spacing;
}

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

@use 'buttons';
@use 'theme';

Common Mistakes

Deeply nesting selectors past three levels, resulting in bloated, overly specific compiled CSS files.
Attempting to read or modify preprocessor variables dynamically inside the browser's DOM using JavaScript.
Forgetting to compile your preprocessor files, leaving browsers to load raw .scss files that they cannot read.

Chapter Summary

CSS Preprocessors (like Sass) extend CSS with programming-like features, compiling them into standard CSS.
Use nesting to organize styles, variables for static configurations, and mixins to reuse blocks of style code cleanly.
Split your project stylesheets into modular, partial files starting with underscores, and combine them using @use.

Browser Support

Browsers cannot read preprocessor files directly; they must always be compiled into standard CSS files first, which are supported natively by all browsers.

🔒

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