offline

Write more with LESS

css

With every new project, you are supposed to learn something new, if it's not something completely new anyway, like SOAP interfaces or the inner workings of a wiki.

In the past few weeks and months, I've familiarized myself with Markdown, SOAP and WSDL, Angular.js (gave up after a week of solving real-world problems), Node.js, Code Igniter, and finally Git, to "optimize the workflow."

I realized that I'm not part of the avant-garde, as these techniques are all 4 years old and there are 1000 "better" and "hipper" package managers and workflows. So be it.

Since you find a gruntfile.js in almost every JavaScript plugin, or similar, on Github, I couldn't help but take a closer look and finally understand how to compress CSS without manually removing every space and line break. (No, I didn't do that!)

Setting up Grunt.js via the Node.js Package Installer npm was relatively simple, and the examples online are usually easy to follow and always the same: How to compress JS or CSS? The CSS preprocessor LESS often appears as an example.

You've probably stumbled upon LESS if you're using Bootstrap.css, so it made sense to learn a new technique that promises to save time for a major upcoming relaunch, despite all the time pressure.

So far, setting up Grunt and reading the documentation has taken more time than writing extensive CSS rules. But the efficiency is already noticeable despite the learning curve, and the use of variables alone is incredibly helpful.

Since LESS can be compiled in various ways and in an emergency, the rendered CSS files can also be changed (if you no longer want to use LESS), I think it enables more efficient work in the long run. It initially adds another step that requires more than a text editor and FTP, but I believe it can be well integrated into the workflow.

Marcus Obst
Güterweg 89b
09474 Crottendorf
Germany

+49 37344 133407
info@marcus-obst.de