Quiz

What are the advantages/disadvantages of using CSS preprocessors?

Topics
CSS

Advantages

  • CSS is made more maintainable.
  • Easier to write nested selectors.
  • Variables for consistent theming. Theme files can be shared across different projects. This is now less necessary with CSS custom properties (frequently called CSS variables).
  • Mixins to generate repeated CSS.
  • Sass and Less have features like loops, lists, and maps, which can make configuration easier and less verbose.
  • Splitting your code into multiple files during development. CSS files can be split up too, but doing so will require an HTTP request to download each CSS file.

Disadvantages

  • Requires tools for preprocessing. Recompilation time can be slow.
  • Not writing currently and potentially-usable CSS. For example, by using something like postcss-loader with webpack, you can write potentially future-compatible CSS, allowing you to use things like CSS variables instead of Sass variables. Thus, you're learning new syntax that could pay off if and when it becomes standardized.
Edit on GitHub