Many of you fine folks have been asking for more preprocessor choices. Stylus in particular was asked for regularly.


We're happy to announce Stylus support is here! Along with Jade, LiveScript, and add-ons for all the CSS preprocessors. You'll find the new options in the Settings area in each of the HTML, CSS, and JS editors.

example-settings
Click the gear icon in the header of the editor to see the Settings.

Let's go through each one.

Stylus

stylus-logo

Stylus is a CSS preprocessor. It's a bit more loose than LESS or Sass in any flavor. Curly brackets? Optional. Colons? Optional. Semicolons? Optional. And you don't even have to be consistent about it.

// Loosey Goosey
.main-nav
  height 100px
  width: auto;

.module {
  background black
}

Otherwise Stylus is similar to LESS and Sass. It is a very robust language with all the power and functionality you might want out of a preprocessing language. It has nesting, (&)

parent reference, variables, @extend, math and logic, mixins, loops, and more, even deeper functionality. Speaking of loops, CodePen supports them, but we will trigger an error if the loop runs too long, so no million-iteration loops! =)

Nib (for Stylus)

nib-logo

Stylus gets a lot more powerful when you choose Nib as the add-on. Immediately you get transparent mixins for CSS3 properties that require vendor prefixing. Transparent mixins are cool. It means you don't have to use some special syntax to call the mixin, you just author it as if prefixes didn't exist and it will prefix it for you. For instance:

* {
  box-sizing: border-box;
}

Automatically becomes:

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

It works the same way for other common properties that need prefixing like gradients, transitions, transforms, animations, and any others you can think of. Along with these mixins you get some clever authoring conveniences. For instance:

.reminder {
  absolute: bottom right;
}

becomes:

.reminder {
  position: absolute;
  bottom: 0;
  right: 0;
}

Look through the rest of

the docs, because there is some more very clever stuff like how overflow: ellipsis; works, clear-fix(), reset-font(), and more.

Jade

jade-logo

I'm excited about Jade personally because I think it's the cleanest of all the HTML preprocessors. Although it is fairly similar to Slim which we also offer. You write HTML essentially like the CSS selector it would be, nested:

nav.main-nav
  ul
    li
    li
    li.last

Becomes:

<nav class="main-nav">
  <ul>
    <li></li>
    <li></li>
    <li class="last"></li>
  </ul>
</nav>

See the

docs for all the little possibilities and quirks. And remember, even though Jade offers shortcuts for them, you don't need a DOCTYPE on CodePen.

LiveScript

livescript-logo

LiveScript is "indirect descendant of CoffeeScript." There are a variety of syntax differences, so that's a matter of style. There are things that one can do that the other cannot, in both directions (e.g. CoffeeScript has splicing, LiveScript has const checking), but seems to me like LiveScript is possibly a little more robust. I was able to find a biased article with some reasons to switch.

Bourbon (for Sass)

bourbon-logo

Bourbon is an add-on for Sass. It works in either syntax variety (.sass or .scss). In many ways it is similar to Compass, which we also still offer. Both offer a robust set of CSS3 @mixins to help with vendor prefixes, as well as a spattering of miscellaneous useful functions. Why use Bourbon instead of Compass? In some ways Bourbon feels a bit more modern and updated. For instance, the mixins for border-radius and box-shadow are both deprecated because we don't need them anymore. Bourbon offers a hidpi mixin for dealing with retina images. It also offers a @keyframe mixin that is the best-of-breed in my opinion. Check it out, just declare once:

<code>@include keyframes(fadeIn) {
  from {
    @include transform(scale(0));
  }
  to {
    @include transform(scale(1));
  }
}

And get all the different version you need, with all the correct prefixing inside the keyframes as well:

@-webkit-keyframes fadeIn {
  from {
    -webkit-transform: scale(0); }

  to {
    -webkit-transform: scale(1); } }

@-moz-keyframes fadeIn {
  from {
    -moz-transform: scale(0); }

  to {
    -moz-transform: scale(1); } }

@-o-keyframes fadeIn {
  from {
    -o-transform: scale(0); }

  to {
    -o-transform: scale(1); } }

@keyframes fadeIn {
  from {
    transform: scale(0); }

  to {
    transform: scale(1); } }

Compass doesn't yet offer mixins for animation or keyframes. I don't doubt that they someday will, and we'll certainly upgrade when they do, but for now Bourbon is a great choice for this. Prefix-free is also great for animations, but most of us don't use that on production projects. Bourbon also offers some additional stuff like fluid grids, #{$all-text-inputs}, fancy easing functions, and more.

LESSHat (for LESS)

LESSHat-logo

Up until now we offer no add-ons for LESS. Using an add-on library is one of the big reasons to use a preprocessor, so that unfortunate time is over. It seems that LESSHat is the most robust of the LESS mixin libraries. Mixins in LESS use the dot-stynax, like this:

.some-element {
  .transform(~"scale(.5) translate(10px, 20px)");
}

Which will get you the prefixes:

.example-transform {
  -webkit-transform: scale(.5) translate(10px, 20px);
  -moz-transform: scale(.5) translate(10px, 20px);
  -o-transform: scale(.5) translate(10px, 20px);
  -ms-transform: scale(.5) translate(10px, 20px);
  transform: scale(.5) translate(10px, 20px);
}

LESSHat is strictly a CSS3 mixin library and doesn't offer user-facing configuration options. If you ever find our version out of date, as with anything, [let us know][24].

Raw

As you'll see, you aren't required to use any add-on at all for your CSS preprocessor of choice.

raw

If you don't plan to use it, just leave it off. It will compile a bit faster.

Enjoy!

There was a lot of preparation required to get all this running safely and smoothly! We hope you enjoy all new options. I know I personally will =). Let us know if you find any bugs or have any other thoughts on it all.