#less.js

LESS but it is more–CSS Preprocessor with ASP.NET

  Now a days a “ CSS  pre processor “ is a very famous buzz word.  Although I am a web developer but still I am not always interested in writing CSS  don’t know why.

When I heard about css pre processor then I was curious to know what it exact about.

So let me share my thought here about CSS Preprocessor.

So a  CSS pre processor is a way to extend the CSS language and variables, functions and…

It's a couple of weeks since I first wrote about LESS. The good news is that we now have a solution that bridges the gap between PHP and LESS. The even better news is that we have LESS generated CSS in production today, and that it does not impact end user load times or radically alter our development flow.

Recap

Shortly after writing about our anticipated use of lessphp, I discovered that its coverage of the language is incomplete; it failed to compile Twitter Bootstrap for example.

less.js is the LESS implementation of choice, so I worked with LESS.app for a few days (a simple Mac app' for compiling LESS files locally that uses less.js under the covers) to get a feel for how LESS would fit into our development process. I found, for instance, that I wanted both .less and .css files checked into SVN (initially at least).

I also had to get up to speed on node.js as a server side container for less.js, a positive experience that I wrote about on my personal blog.

Our Solution

In our development environment:

A custom HTTP LESS server is running on our dev machine on node.js, listening on a specific port

Where we minify and concat our CSS at request time, we now also make requests to the LESS server for CSS files that have a corresponding .less file

The LESS server takes the .less files referenced in each of the local HTTP GET requests and compiles them

The LESS server runs as root and as such is capable of writing to the local file system (something that would be difficult to do as part of the execution of a web request within apache)

The compiled CSS is served, and is persisted in the file system ready to be checked in.

N.B. The CSS file corresponding to the LESS file being compiled should already exist at request time time. This ensures that the node.js process running as root will not create files within developer file systems, it will only modify existing files.

On production hosts:

Static CSS (albeit CSS compiled from LESS and checked into SVN) is served as it always has been

Try it yourself

Our less server is available as a Slytrunk repository on github.

I spent a little time last week going through the less.js code, and decided to see how easy it'd be to port over to PHP. We don't run Node on our production servers and most current implementations of less in PHP don't support the full syntax outlined on lesscss.org, so there was other motivators involved as well.

Using PHP5.3 meant I could make use of namespaces and anonymous functions to do a fairly straight port of the code, so keeping it up to date with less.js shouldn't be a hassle. The only difficult part of the re-write was some of the logical differences between JavaScript and PHP, but learning that was one of the reasons I wanted to do this in the first place.

Love, love, LOVE this...

The Semantic GRID SYSTEM Page layout for tomorrow.

The one obvious drawback with LESS is that it requires JavaScript to be enabled in the user's browser. If JavaScript is turned off — or the browser can't run JavaScript — then the resulting page will look pretty messy!

Even for browsers that do run JavaScript, there's a slight overhead associated with downloading and running the less.js file.

Because of these issues, you may want to use less.js purely for developing your site. When putting the site live, you can pre-compile your LESS code into a regular CSS stylesheet, which you then serve on your live site instead of the LESS code.

Here are some ways to pre-compile LESS into CSS:

Run less.js using Node.js You can run the less.js script outside the browser by using the Node.js JavaScript framework. See the relevant section in the LESS documentation for instructions.

Use lessphp lessphp is an implementation of the LESS compiler written in PHP. You can run it manually to create a CSS file as needed, or you can set it up on your server to compile as required whenever a page is requested (see the documentation for details).

lessphp's syntax has a few differences from regular LESS, including abstract blocks, a semicolon instead of a comma as the mixin argument separator, and (at the time of writing) no support for the colour functions.

Use an online compiler If you just want to compile some LESS code quickly without installing a compiler, you can use an online compiler. The lessphp site has an online version you can use. There's also OnLess.