Heads up! This blog post hasn't been updated in over 2 years. CodePen is an ever changing place, so if this post references features, you're probably better off checking the docs. Get in touch with support if you have further questions.

CSS PREprocessors, a site by Alexander Futekov:

CSS PRE is a project that aims to collect as much information about the popular CSS Preprocessors as possible, in order to serve as a one-stop reference.

Useful little reference for how to do things in preprocessors. If you switch between the different ones (an easy thing to do here on CodePen), it’s easy to get confused on how different things work syntactically. Things like variable interpolation (using a variable inside a selector, for example). It’s different in all three:

.class-@{var} { }
.class-#{$var} { }

Even better, through our Prefill API, you can just click a button to move the code example right over to CodePen!