CSS PREprocessors

About

CSS PRE is your one-stop reference for the most popular CSS Preprocessors - Less, Sass, Stylus and PostCSS.

Contribute on GitHub to make the site better.

Syntax and Features

The code examples for Sass on this site use both the indented syntax and the CSS-based SCSS syntax.

If you are using Sass you can choose to compile with either Ruby Sass or LibSass, the former is written in Ruby (obviously), the latter is a C/C++ implementation and is way faster; another differences is in the Sass features they support, Hugo Giraudel has built a nice Sass compatibility table if you need to check those out.

Stylus allows extreme freedom in terms of syntax - we can omit braces, semicolons, and even colons. To be future-proof, this site will only show Stylus snippets with colons (omitting semicolons and braces) and by prepening each variable with the currently optional $ sign (this is how Stylus will most likely work in the future). I advise you to read Stylus' resources on what is allowed in terms of syntax.

Versions

This site is closely tied to CodePen, as a result all code is written to be compatible with the versions of the preprocessors that CodePen supports - Less, Sass, Stylus, and PostCSS.

Thanks to

The great people at CodePen, thanks to them all code snippets can be launched in a new tab and played around with.

And our contributors at GitHub.