CODEWITHSUNDEEP
cssbrowserless
Joe.wang
Joe.wang

Reputation: 11791

Where is the compiled CSS of a Less file stored?

I use Less with my site. Let say the code look like below.

<html>
<head>
<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/1.7.3/less.min.js"></script>
</head>
<body>
    ...
</body>
</html>

When I updated the styles.less file, and refresh the page, Less.js will compile the less file and apply to the page. But I just wonder where is the compiled CSS file stored? Does less.js call lessc to compile the less file?

Upvotes: 2

Views: 694

Answers (1)

alandarev
alandarev

Reputation: 8635

In the setup you gave (the HTML page), you are letting the client to worry about interpreting the Less file.

To be exact, Browser loads the JavaScript library you link to, and then this JavaScript interprets the styles.less file.

The actual css file is not stored on the server, as it is all the browser-sided work, and I doubt the browser stores it somewhere except RAM.

This does not sound like a good approach though. We, generous site owners with high-end servers love to lift the computational bit off the clients as much as possible. We do not want to upset an iPhone user running low on battery without neccessity.

Alternatively, you run lessc styles.less > styles.css on your styles file after you finished editting. And then use styles.css in HTML directly, also remove the less.js from HTML.

Question you might want to ask: How do I make compiling to css automatic then?

There are several solutions:

  • Automate the compilation of less file on it being changed, using some software to watch a file or directory.
  • The Editor you are using might have compile less feature, or be added as an extension.
  • You might want to consider strat using a web framework. It is an overkill for just compiling less, but if you get other advnatages from web framework or are already using it - that is a good option. An example of using Less middleware with Express framework.

Upvotes: 1

Related Questions