Today one of my coworkers asked me for more information on a
CSS preprocessor I had mentioned in one of our weekly meetings. I've been using LESS CSS lately for one of my projects and enjoying it. It simplifies the CSS I have to write, and the language is easy to follow as most of the syntax reads like standard CSS code.
Getting Started with LESS
Here’s the official LESS website that will walk you through
how it works:
They have some good documentation and examples to get you started.
This was originally designed to “compile”
the CSS in the user's web browser. I prefer to do this before it gets to the client. This offloads some of the work from the client browser, and ensures your CSS will always be generated the same way every time regardless of the client's browser capabilities. This also prevents the chance of making the page “blink” as it converts the LESS to CSS. This is especially applicable to me as my current web application project is running on a "thin client" machine which runs an older browser on a limited processor.
So how do we get from a LESS file to usable CSS? There are a couple ways to generate your CSS from LESS
files…
Getting to CSS
The easiest way to get started would be to use the popular Visual
Studio extension Web Essentials:
It provides great LESS support in Visual Studio (and lots of
other handy features). Every time you save a LESS file, it automatically generates
an accompanying CSS file in your project, which you can then reference in your
page.
Too many files?
Personally I don’t like managing all the extra CSS files in
my project. Part of me worries that my CSS won't always be "in sync" with my LESS file, either from some unseen bug or more likely a mistake I may make. I prefer to let the server automatically generate my CSS on the fly, and cache the generated result. This gets a bit more complex and requires some other packages, but I feel it's worth it.
First, I love the LESS preview function in Web Essentials, but as I mentioned I don't want the CSS files generated. This is easy to disable under Visual Studio's Tools > Options menu. Under Web Essentials > Less, disable "Compile files on save."
I use a NuGet package called dotLess (a .net based LESS
compiler):
It handles all requests for .less files and returns the
compiled CSS. This way I can put a reference on my page for a .LESS file and
the server will return the compiled CSS automatically. The only drawback is
that it isn't quite up to date with the LESS spec, so I've run into a few issues with some of the
more complicated aspects of the LESS language. Thus far I've been able to work around them so I'm willing the accept the trade off for the convenience it provides.
Bundling & Minification
Generated CSS is great, but it's even better if we can bundle and minify everything to improve the page load time and the overall user experience.
For bundling & minification with dotLess, I use this
package:
This gives me a “LessBundle” class that will let me bundle &
minify multiple CSS & LESS files. For example, my BundleConfig.cs file in
my MVC project has this entry in it:
bundles.Add(new LessBundle("~/Content/styles")
.Include("~/Content/normalize.css")
.Include("~/Content/less/Site.less")
);
Now, I can just include a reference to the bundle in my view:
@Styles.Render("~/Content/styles")
In debug mode I get a style tag for each file. The request for the less file will be handled by dotLess
<link href="/Content/normalize.css" rel="stylesheet"></link>
<link href="/Content/less/Site.less" rel="stylesheet"></link>
In Release mode, bundling and minification become enabled, and everything in the LESS Bundle is compiled with dotLess and minified into a single stylesheet link:
<link href="/Content/styles?v=OVSsAe9M_HQdBtQlL5-p9IRWblY32n6g5U4FaGEiUCE1" rel="stylesheet"></link>
