Here’s the Deal

Less vs Stylecow

130 15

6 0

When comparing Less vs Stylecow, the Slant community recommends Less for most people. In the question“What are the best CSS preprocessors/postprocessors?” Less is ranked 3rd while Stylecow is ranked 7th. The most important reason people chose Less is:

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.

Ranked in these QuestionsQuestion Ranking

Common Questions

What are the best CSS preprocessors/postprocessors?

Pros

Pro
Easy to learn

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.

Pro
Familiar CSS style syntax

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 }
    }
  }
}

Pro
Modern features and mixins

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

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

Pro
Popular

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

Pro
Less is written in JavaScript

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.

Pro
GUI apps

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

Pro
Good IDE support

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

Pro
Easy to install and use

It's written in node, so you can install it with npm. All available plugins are installed by default and include some development tools like a watcher and a browser live-reload so it don't need more than few seconds to be ready to start to work.

Pro
Advanced API and parser

The parser detects any CSS syntax error found. The output code can be customized to follow your own code style rules (indentation, spaces, string quotes, etc). It has a clean and powerfull API, which make easy to create new plugins.

Pro
No need to learn a new syntax

Since Stylecow allows developers to write simple, vanilla CSS, there's no need to learn a whole new language.

Ad
Cons

Con
Less uses '@' to declare variables

The '@' symbol is used with Less to declare variables. However '@' already has meaning in CSS, as it is used to declare @media queries and @keyframes. This can result in some confusion when reading the code.

Con
calc() requires interpolation

Con
Limited support of conditionals

Less currently has limited support of conditionals such as ternary operators.

Con
No custom functions

Less does not offer custom functions and instead requires the use of mixins. This is limiting in many ways - Functions cannot be called on shorthand values, they cannot return a value, and code needs to be repeated depending on where the mixin is needed.

Con
Noisy syntax

Many unnecessary characters such as the following:

 {}:;@

Con
No loop and conditionals block

Con
May be merged with PostCSS in the future

Since Stylecow is pretty small and hasn't gained a lot of traction in the past 5 or so years since it was first released but also because it serves kind of the same purpose as PostCSS which is much more popular, there have been discussions on merging the two projects together.