All of the CSS processors that CodePen offers have add-ons. They all work by adding additional code to the top of the CSS code you write, but we’ll help you do that in the UI. You can see a list of them in the CSS settings right next to where you select the CSS processor itself.

Note: CSS Processors add-ons only work in the Pen Editor, not the Project Editor.

Clicking the Add button will insert the @import line into the CSS to make the add-on work. The ? link will open a popup explaining what the add-on does.

Versions

Some of the processor add-ons are versioned, and some are not. For example, Bourbon can be used as version 4, 5, or 7 like:

@import bourbon@4.*;
/* or */
@import bourbon@5.*;
/* or */
@import bourbon@7.*;

The only other two that are versioned are Sass’ Modular Scale which works at @2 or @3. Neat, which works at @1 or @4, and Susy which works at @2 and @3.