StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POLoad less.js rules dynamically
text
Body
copied!<p>I'm looking at using <a href="http://lesscss.org/" rel="noreferrer">less</a>.<a href="http://github.com/cloudhead/less.js" rel="noreferrer">js</a> (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</p> <pre><code><link rel="stylesheet/less" href="/static/less/style.less"/> <script src="http://lesscss.googlecode.com/files/less-1.0.30.min.js"></script> </code></pre> <p>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 <a href="http://github.com/cloudhead/less.js" rel="noreferrer">this tutorial</a>.</p> <p>Is there any way to load less stylesheets after initial page load? </p> <p>Note that <a href="http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-you-need-to-check-out-less-js" rel="noreferrer">this blog</a> describes a 'watch' feature - </p> <blockquote> <p>which will auto-refresh the CSS whenever you save your LESS code</p> </blockquote> <p>so it seems reasonable to expect that I could add some LESS rules after page load. Feels like I'm missing something.</p> <p>Cheers,</p> <p>Colin</p> <p>UPDATE: code used to test behaviour described in comments (less style sheet listed after the script) -</p> <pre><code><!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> </code></pre> <p>and the less stylesheet</p> <pre><code>@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; } } </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload