Using CSS Preprocessors

We offer two different CSS preprocessors you can use while creating or editing Pens on CodePen: Sass and LESS. These languages can help you write more succinct, programatic CSS. And 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:

Click the language you wish to write in. Note that both syntaxes for Sass are available (.sass and .scss) and whichever you choose, Compass is automatically available.

Example

Say you’ve chosen Sass, 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)”: