We offer three different CSS preprocessors you can use while creating or editing Pens on CodePen: Sass, LESS, and Stylus. These languages can help you write more succinct, programatic CSS. Perhaps your own projects already use these, so you can stay in a comfortable and consistent place while using CodePen. To use them, click the settings "gear" icon in the upper right of the CSS editor pane to reveal the settings for CSS:

css-settings

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

CSS Preprocessor Addons

We offer add-ons for each of the preprocessors that add helpful abilities to the preprocessor syntax. All of them help with CSS3 vendor prefixing, but each of them handles it just a bit differently and offer slightly different extra features. You can explore the documentation of them to learn more:

Example

Say you've chosen Sass with Compass, 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);
}

You can see that compiled output yourself by clicking on the title "CSS (Sass)":

preprocessed