Load less.js rules dynamically

Hi,

I'm looking at using less.js (looks great), but our site requires that some styles be loaded dynamically after initial page load. It seems, however, that all LESS stylesheets must be loaded prior to the less.js script load. i.e. this works

<link rel="stylesheet/less" href="/static/less/style.less"/>
<script src="http://lesscss.googlecode.com/files/less-1.0.30.min.js"&gt;&lt;/script&gt;

but it fails if the lines are swapped around, neither firefox nor chrome appear to attempt loading 'style.less' unless they are ordered correctly. The ordering requirement is noted explicitly in this tutorial.

Is there any way to load less stylesheets after initial page load?

Note that this blog describes a 'watch' feature -

which will auto-refresh the CSS whenever you save your LESS code

so it seems reasonable to expect that I could add some LESS rules after page load. Feels like I'm missing something.

Cheers,

Colin

UPDATE: code used to test behaviour described in comments (less style sheet listed after the script) -

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Simple</title>

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt;
  <script src="/static/js/less-1.0.31.min.js"></script> 
  <link rel="stylesheet/less" href="/static/less/style.less" id="abc123"/>
</head>
<body>
  <div id="container">
    <div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
  </div>
  <div id="#abc">Bingo</div>
</body>

<script>
console.log("refreshing styles...");
less.sheets.push(document.getElementById('abc123'));
//var lessStyle = $("<style>#abc { color: blue; }</style>").attr("id", "less:static-less-style").attr("type", 'text/less');
//$("head").append(lessStyle);
less.refresh(true);
console.log("refreshed...");
</script>
</html>

and the less stylesheet

@primary_color: green;

.rounded(@radius: 5px) {  
  -moz-border-radius: @radius;  
  -webkit-border-radius: @radius;  
  border-radius: @radius;  
}

#container {
  background: @primary_color;
  .rounded(5px);

  div {
    color: red;
  }
}

Hi - thanks for the response. I should have mentioned that the css is loaded by dynamically appending the <link rel="stylesheet/less" href="/static/less/style.less"/> into the document head - so it is not included in <style> tags. I guess I could instead load the less document as raw text and write raw style tags into the document head - do you think it is possible to use <link/> tags though? Thx

hawkettc 2010-07-05 15:17:17

Ok in that case you can add the document node to `less.sheets`, and then call `less.refresh()`. Something like:`less.sheets.push(document.getElementById('my-new-link-tag'));``less.refresh()`

cloudhead 2010-07-05 15:59:31

I did a quick test of both these methods - firstly the dynamically added <style/> tag - the issue I am having is that I don't seem to be able to append a style tag with type='text/less' (using jquery) - it always reverts to 'text/css' in both firefox and chrome. I can see a style tag for a document loaded with <link/> that has id='less:static-less-style', but it too has a type of 'text/css', so it doesn't look jQuery related. For the second approach using less.refresh() - I can't get this to work for <link/>s to less documents in the head that appear after the less.js script import.

hawkettc 2010-07-05 16:16:04

Apologies - I misread your last comment - less.sheets.push() works great - I've edited the code in the original question to show it working - thanks.

hawkettc 2010-07-05 16:31:25

Out of interest, is it possible to process a single sheet without refreshing everything - e.g. less.sheets.push(mySheet); less.loadStyleSheet(mySheet); ? For my use-case existing sheets never have dependencies on newly loaded sheets...

hawkettc 2010-07-05 16:54:02

ansaurus

tags:

views:

answers:

Load less.js rules dynamically

related questions