Dave
Dave

Reputation: 290

Why should you compile your less files?

I compiling my less files to one css file. But i saw on http://lesscss.org/ that you can include the less file instant on your webpage.

Client-side is the easiest way to get started and good for developing with Less, but in production, when performance and reliability is important, we recommend pre-compiling using node.js or one of the many third party tools available.

To start off, link your .less stylesheets with the rel attribute set to "stylesheet/less":

Next, download less.js and include it in a tag in the element of your page:

What is the diffrents between compiling to css or just jusing the less file?

Upvotes: 0

Views: 1747

Answers (1)

Phil Teare
Phil Teare

Reputation: 467

Compiling to CSS

Here compiling means to use a program to turn a .less file into a .css file.

For example, a less file:

.outerDiv { 

    .innerDiv {

         color:green;

    }

}

when you use a compiler on it that will generate a css file like:

.outerDiv .innerDiv {

  color:green;

}

I use koala. It does not overwrite your file, it just generates a css file alongside it.

All you need to do is reference that css file in your head part, then upload to the server.

Advantages over less.js method

This is lighter (less data for the client to load) than sending over the less file (especially if you minify the css file, which koala will do for you too).

It also makes for faster loading without any "jump" for the user.

If instead you use the less.js method, then:

  • page loads and renders without your lovely .less styling
  • less.js then kicks in and restyles your page with you .less rules

If the user is on a slow connection they may see the old unstyled version for a second, then the page will suddenly reformat itself.

Upvotes: 1

Related Questions