Best IT Recipes

Load less.js rules dynamically

I am looking at using less . js (looks great), but our site requires some styles to load dynamically after the page loads. It seems, however, that all LESS style sheets should be loaded before the less.js script is loaded. those. it works

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

but it fails if the lines are exchanged, neither firefox nor chrome try to load "style.less" if they are not ordered correctly. The ordering requirement is explicitly stated in this tutorial .

Is there a way to load fewer style sheets after loading the start page?

Please note that this blog describes the watch function -

which will automatically update CSS whenever you save the LESS code

therefore, it seems reasonable to expect that after loading the page I can add some LESS rules. Looks like I missed something.

Greetings

Colin

UPDATE: the code used to verify the behavior described in the comments (less the stylesheet specified 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"></script> <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 less styles

 @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; } }
+23
javascript css less
Jul 04 '10 at 14:45
source share
3 answers

I just hit 1.0.31 - it has a method: less.refreshStyles() , which will recompile the <style> tags with type="text/less" - try and let me know if it works.

+28
Jul 05 '10 at 10:38
source share

Thanks for asking this question - it helped me a lot. I'm just updating the theme to show how I did to dynamically add a CSS file.

I used the latest version of LESS (1.3.3).

 var stylesheetFile = 'file.css'; var link = document.createElement('link'); link.rel = "stylesheet"; link.type = "text/less"; link.href = stylesheetFile; less.sheets.push(link); less.refresh();
+11
Jan 09 '13 at 9:15
source share

You can use this lightweight (3k) library for lazy downloads of less than / css and js files (disclaimer: I am the author).

It is as simple as:

 lazy.load('/static/less/style.less');

It can also receive a callback, load a few more assets with dependencies, and take care of the cache.

+2
Jul 07 '14 at 6:23
source share


More articles:


All Articles