Less vs Rework

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.

Through transforms you can modify existing properties to give them new attributes and options, so instead of managing messy mixins, you can add a simple new attribute where they make the most sense.

Because Rework plugins are done in code, there are no limits to what they can do, and they tend to provide more advanced functionality that would be harder to implement in other preprocessors, such as file I/O and custom logic.

Rework isn't a language for compiling to CSS but rather a library around parsing it and transforming it. For example, a vendor prefix plugin will inject prefixes around needed properties so you don't have to muddy up your CSS dealing with it.

Because Rework is built around plugins at its core, it makes for easier plugin writing if you find you want to add in new functionality.

Although you don't have to, since Rework works on vanilla CSS, you could use another preprocessor that has a syntax you enjoy more before applying Rework's transforms.

Rework plugins can recognize custom properties and transform them via plugins. This allows you to keep your CSS clean and expand its functionality in a native feeling way, without having to learn a bunch of new language constructs.