CSS Preprocessors can help you write succinct, programmatic CSS. We offer several CSS preprocessors on CodePen:
To add a preprocessor to your Pen, click the settings “gear” icon at the top of the CSS editor panel. The Pen Settings will open with the CSS tab automatically selected. You can also open Pen Settings from the button in the header.
Select your favorite preprocessor from the “CSS Preprocessor” dropdown menu:
Press the green “Save & Close” button to save your choices.
Use Certain Preprocessors All the Time?
Go into your Editor Settings and change the defaults:
Using CSS Preprocessor Add-ons and Plugins
We support a selection of add-ons and plugins for each of the preprocessors.
To access the list of available add-ons for your chosen preprocessor, click the “Need an add-on?” button above the preprocessor dropdown menu. That will open a list of the add-ons or plugins available for your preprocessor of choice. Instructions for how to use the add-ons in your Pen are shown above the list of add-ons.
Here’s an example of using PostCSS, then adding a PostCSS plugin to change the processing:
You can find more information and a link to the documentation for each add-on by clicking the question mark icon at the right of the add-on name.
Example
Say you want to use Bourbon 5 with SCSS. You’d make sure you are using both by selecting SCSS as your active CSS preprocessor, then including the @import statement for Bourbon (we help you with this from the Pen Settings dialog when you click the add button).
Then you use things that Bourbon can do:
@import "bourbon@5.*";
.element {
@include border-color(
#a60b55 #76cd9c null #e8ae1a
);
}And in the preview and when you choose View Compiled SCSS, you’ll see:
.element {
border-top-color: #a60b55;
border-right-color: #76cd9c;
border-left-color: #e8ae1a;
}Viewing the Compiled Output
You won’t see the compiled CSS code in the editor by default, but you can see it by clicking the “View Compiled” button in the header of the editor:
Autoprefixer Notes
If you flip on Autoprefixer for a Pen directly via settings, you can’t customize much. You might be used to being able to set browser support levels in Autoprefixer, but you can’t do that on CodePen using it the default way. If you really need to set browser support levels, leave Autoprefixer off, turn PostCSS on, and @use it like this:
@use autoprefixer(
remove: false;
browsers: "> 1%, firefox 32"
);
main {
/* Normally autoprefixer would remove the next statement, but we're telling it not to above. */
-webkit-border-radius: 10px;
border-radius: 10px;
display: flex;
}Autoprefixer also doesn’t support CSS grid by default, but you can turn on support for it with a code comment, like this:
/* autoprefixer grid: on */
.page {
display: grid;
grid-gap: 33px;
}