Skip to main content

What is CSS preprocessor?

Pre-processors extend CSS with variables, operators, interpolations, functions, mixins and many more other usable assets. After development, these specific files are compiled into regular CSS that any browser can understand. Pre-processor help writing reusable, easily maintainable and extensible codes in CSS.

CSS preprocessors:

  • SASS (SCSS)
  • LESS
  • Stylus
  • PostCSS

Advantages:

  • CSS is made more maintainable.
  • Easy to write nested selectors.
  • Variables for consistent theming. Can share theme files across different projects.
  • Mixins to generate repeated CSS.
  • Splitting your code into multiple files. CSS files can be split up too but doing so will require an HTTP request to download each CSS file.