CSS Preprocessors can help you write succinct, programmatic CSS. We offer several CSS preprocessors on CodePen:

Note that both syntaxes for Sass are available (.sass and .scss).

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.

Select your favorite preprocessor from the "CSS Preprocessor" dropdown menu:

Press the green "Save & Close" button at the bottom of the settings panel to save your selection.

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.

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've chosen Sass with the Compass add-on. You could now write code like this:

div
  +box-sizing(border-box)

@for $i from 1 through 3 
  .char#{$i} 
    +transform(rotate(($i*6)+deg))

And this CSS will be created and used in your Pen:

div {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.char1 {
  -webkit-transform: rotate(6deg);
  -moz-transform: rotate(6deg);
  -ms-transform: rotate(6deg);
  -o-transform: rotate(6deg);
  transform: rotate(6deg);
}

.char2 {
  -webkit-transform: rotate(12deg);
  -moz-transform: rotate(12deg);
  -ms-transform: rotate(12deg);
  -o-transform: rotate(12deg);
  transform: rotate(12deg);
}

.char3 {
  -webkit-transform: rotate(18deg);
  -moz-transform: rotate(18deg);
  -ms-transform: rotate(18deg);
  -o-transform: rotate(18deg);
  transform: rotate(18deg);
}

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:

Preprocessor Quirks

To use the CSS calc() value in LESS, do this:

body {
  width: ~"calc(100vw - 10em)";
}

Otherwise LESS will do the math inside the parenthesis first. There is a "Strict Math" setting for LESS to work around this, but we can't enable it globally (backwards compatibility issues) or on a Pen-by-Pen basis (practicality issues).