Stylus vs Sass

Stylus has an extremely terse syntax. Colons, semicons and braces are all optional allowing you to write Stylus code however you want.

hover-darken(percent)
  if @background
    &:hover
      background: darken(@background, percent)

.test
  background: blue
  hover-darken(50%)

The hierarchy is required to be whitespace indented which makes it easier to identify which parent selectors child selectors belong to.

Not only does Stylus support all the features from Less and Sass, it provides features not found anywhere else:

• You can get properties from parents and pull them into children and/or mixins - if the property isn't found, it will bubble up until it finds a match
• Introspective API, where a CSS block can tell if it’s at root level or not and change its output based on this
• Splats - taking variable amount of arguments in as an array
• Automatically vendor prefixes @keyframes
• Pass a CSS literal block wherever you want
• Convert files to base64

One of Stylus' distinguishing features is transparent mixins: reusuable, possibly dynamic styles that look exactly like native CSS properties. This is particularly useful for using future non-prefixed properties and having them transparently expand to their prefixed counterparts without any special, preprocessor-specific syntax.

Stylus runs on node.js which makes it very easy to integrate into your project if you're using npm.

@extend gives inheritance and unlike for other preprocessors, you can pass any CSS selector, not just classes.

Stylus has clear and detailed error reporting that includes stack traces and line numbers.

Nib is Stylus's answer to Compass, but with the advantage of transparent mixins.

Ride css add dozens of useful mixins to Stylus. Compatible with axis, nib and other mixins libraries.

Roots is a awesome toolkit that contains a CSS library for Stylus that provides the benefits of Nib and more. It is essentially a collection of mixins that add a variety of enhancements to the Stylus workflow.

Stylus can also convert files to base64 which provides the following advantages:

• Easier to maintain
• Gives you the cleanliness of a URL link resource as well the benefits of base64 encoding
• Reducing the number of requests

Functions like max(), min(), sum(), all collour handling functions are all there.

You are able to declare custom functions with Sass (for example, converting units) which can be easily invoked, even when using shorthand properties. This results in cleaner, more reusable code.

Sass allows you to nest selectors which results in code that is both faster to write and cleaner to read.

For example, this:

.parent 
  color: blue
  .child
    color: yellow

Will compile to this:

.parent {
  color: blue;
}
.parent .child {
  color: yellow;
}

Another big advantage for Sass is the very active community pushing the development forward at a rapid pace. Sass is constantly coming out with bug fixes, and are often the first to come out with improvements.

This is an important factor to keep in mind when picking a preprocessor to invest your time into.

It comes with two possible syntaxes:

• Sass - No parens or semicolons allowed and the nesting is dictated with whitespace.
• SCSS - SCSS syntax is a superset of CSS – which means SCSS can be written as CSS, but has been expanded to include the features of Sass as well.

SCSS is easier to pick up for beginners and Sass has a cleaner syntax. Having both syntaxes means you can pick the one that best suits your coding style.

The mandatory syntax rules for both SCSS and Sass results in a more consistent code. For a more detailed analysis between Sass and SCSS go here. To see a nice comparison of the Sass syntax against CSS and SCSS go here.

Sass simplifies minifying CSS files by offering a one-line command that will output a minified version.

It's very comfortable and easy to write/learn Sass, even for beginners.

Sass can be used with a framework called Compass, which provides additional functions and mixins which can reduce the amount of code you have to write.
For example, Compass will take care of vendor prefixes.

This:

div {
    background-image: -webkit-linear-gradient(#F00, #000);
    background-image: -moz-linear-gradient(#F00, #000);
    background-image: -o-linear-gradient(#F00, #000);
    background-image: linear-gradient(#F00, #000);
   }

Can be written as:

.gradient {
    @include background-image(linear-gradient(#F00, #000));
}

For a full list of features, check out the Compass documentation.

Rather than being limited to editing the outputted CSS file in devtools, with source maps you are able to manipulate the original .scss file.

There is also a C/C++ port of the Sass CSS precompiler called Libsass that decouples Sass from Ruby. It is very fast, portable and easy to build and integrate with a variety of platforms and languages.

The latest implementation of Sass is written in Dart, and compiles to pure JS with no native code or external dependencies, means you no longer need Ruby or libSass.

Since it's written in Ruby, it's easier and faster to use with Ruby apps.