You might be wondering what Less is? It is a Css preprocessor - just like Sass or Stylus. So, what is a CSS Preprocessor? Well it's a program that runs on your computer that creates CSS from Less or Sass files. - Wait? It's a program that makes CSS? Why would I need that - I can write CSS.
Welcome to CSS preprocessing.
First off let's answer the big question of WHY? Ultimately it saves time - It saves typing and makes things more portable/templateable/ and adds functionality to CSS previously unavailable.
Normally you would write CSS to add style to your HTML. When using a CSS preprocessor you would write Less or Sass (which looks a lot like CSS) which then is compiled into CSS. Writing Less or Sass allows you to be more programmatic in your writing. Places where you would normally type redundant code - things like the color of header text or the background colors of divs, Less allows you to use variables in place of those hex values. This way you can change the value of a variable - which in turn changes the value of any instance of that variable.
you'll need to add a preprocessor to your workflow. Less runs inside Node, in the browser, or from command-line with Rhino. There are also many 3rd party tools that allow you to compile your files and watch for changes ( These are programs that run and watch a file or folder for any changes and then compile. These are programs like Crunch 2, SimpLess, Prepros, or many more - Many IDE's can compile CSS from Less too like Sublime Text, Visual-Studio, Eclipse. Here is a full list of CSS Compilers
Any value that is repeated - like colors or sizes, can use a variable. This way you can easily change the value of all instances of that variable once. This might not save any time initially since you still have to type the variable name - but it does save time down the road if you need to change teh value of all instances of them or you want to reuse the layout again.
Allows you to treat classes and ids as function which can be invoked inside of other classes and ids. It just means you can include full css description by just typing the name of the class/id and putting (); after it. so to use class .a as a mixin you'd just type .a(); and that class would be copied into another class.
Less includes many types of functions that provide all kinds of functionality not available in standard CSS. You can darken or lighten text using functions as well as perform math. You can also include other Less Files or extend classes with other classes. There are function for handling strings, lists, color blending and more.
Importing is a great feature of Less that allows you to break your CSS into smaller files and import them as needed. This is one of the fastest features of Less. If you start thinking about your style sheets as modules you can just mix and match at will.
This allows @media to be nested inside of a class just like selectors can. This saves having to write so many redundant grouping of classes for different media queries.
Less allows you to do so many more things with CSS that just isn't possible with vanilla CSS and way more redundant typing.
It turns a CSS styling syntax into a styling language.
Less requires a program to take your Less files and generate CSS from it. This can be a hassle. You will have to find a plugin or program to make the compilation happen. Your browser can't render Less to CSS - you have to deploy your site with the CSS. If you are editing CSS on a live server you can't use LESS (without configuration and effort). For this reason, you'll mostly be using Less on your local machine and just deploy the generated CSS file.
Less doesn't save you any time up front; in fact it can take even longer initially! When you create your Less files you will have to take time to structure it and learn when to use variables and mixins. It might take some getting used to imports and breaking your CSS into smaller module Less files. It might even take multiple projects to even see a benefit to using Less. Where Less really shines is it's ability to make one project work for another project. Being able to take the nav.less file from one project then use it in another, just by being able to tweak a few color variables or import values means less redundant code writing. Maybe that's why it is called Less because in the end you end up writing Less CSS?
Just like any new technology, it takes time to learn how it works. Even though Less is generally pretty straight forward and really doesn't require to know much past regular CSS - it still requires some effort. The great part about Less is that you don't need to know much in order to get the benefit out of using it. It is really easy to use variables, mixins and imports and that should be enough to make it worthwhile.
If you are working with Less in a team setting it will require a little effort to make sure everyone is on the same page. Everyone will be using the Less files to build the project styles so that means everyone will need to know how they are setup, what Less files are being used and it just means one more element to track and discuss with your Team. In the end Less should still be a time saver, but it may be a hurdle that some established teams might not want to tackle until they are sure it is necessary.
At the end of the day Less is a tool, but not a necessity. It can be a real time saver for some teams, but not any benefit for others. If a team is putting up multiple sites or redesigning many different websites, Less would be perfect; but if you only have one website that changes once in a blue moon - then the investment of setting up Less and integrating it into your work flow might not be a benefit. Less makes CSS and if you already have a site with established CSS then it probably won't be beneficial.
