Recs.
Updated
Less is a great choice if you want the majority of the benefits of a CSS preprocessor without having to learn a new syntax and advanced features.
Less is a JavaScript library and can be processed client side. This makes it very easy to get started and is great for rapid development. However it can be compiled both locally and on the server with node.js for production environments.
Specs
Pros
Pro Easy to learn
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.
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 Popular
Less is one of the most popular preprocessors due to being the easy to learn and its use in Twitter Bootstrap.
Pro Good IDE support
IDEs such as VS Code, Visual Studio and WebStorm (and other JetBrains IDEs) support LESS either natively or through plugins.