Stylus vs Less

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.

Because Less has a lightweight feature set, is syntactically similar to CSS and can be run client side with file conversion on a page reload, it is easy to pick up by anyone familiar with CSS & the very basics of JS.

Also, Less has detailed and well-organized documentation, GUI apps that can watch and compile code for you and a huge, active and helpful community.

The LESS syntax is essentially the same as CSS with extensions for dynamic behavior such as variables, mixins, operations and functions.

Variables:

@color: #4D926F;

#header {
  color: @color;
}
h2 {
  color: @color;
}

Mixins:

.rounded-corners (@radius: 5px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  -ms-border-radius: @radius;
  -o-border-radius: @radius;
  border-radius: @radius;
}

#header {
  .rounded-corners;
}
#footer {
  .rounded-corners(10px);
}

Nested Rules:

#header {
  h1 {
    font-size: 26px;
    font-weight: bold;
  }
  p { font-size: 12px;
    a { text-decoration: none;
      &:hover { border-width: 1px }
    }
  }
}

Less contains the base feature-set for a CSS preprocessor:

• Nesting
• Variables
• Basic mathematical operations
• Color functions
• @import
• Basic type functions

Less is one of the most popular preprocessors due to being the easy to learn and its use in Twitter Bootstrap.

Many web developers are familiar with JavaScript and because Less is written in JS, it can be processed client side making the set-up easy.

Apps such as Crunch, SimpLESS, WinLess, Koala, CodeKit, LiveReload or Prepros will watch and compile less.js for you.

IDEs such as VS Code, Visual Studio and WebStorm (and other JetBrains IDEs) support LESS either natively or through plugins.