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.
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
@3. Neat, which works at
@4, and Susy which works at