Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

less.js lazy sheet load

I'm wondering if there is a way to load a single less sheet sometime after a page load. This question has an answer that explains how to reload all the sheets, but for my use-case existing sheets never have dependencies on newly loaded sheets, and it would be good to just add the sheet lazily. I'm thinking something like

less.sheets.push(mySheet);
less.loadStyleSheet(mySheet);

might represent a possible API? Cheers,

Colin

UPDATE 3rd Dec 2010:

I've tried out Livingston Samuel's fix of the less.js codebase, and while it does work, it doesn't appear to recognise definitions in already loaded stylesheets. Here are my sample files

a. index.html

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

  <link rel="stylesheet/less" href="/static/less/style.less" id="abc123"/>
  <script src="/static/js/less-1.0.40.js"></script> 
</head>
<body>
  <div id="container">
    <div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
  </div>
  <div id="abc"><div>Bingo</div></div>
</body>

<script>
console.log("loading new sheet");
less.loadStyleSheet("/static/less/style2.less", function() {
    console.log("Loaded!"); 
});

console.log("called");

</script>
</html>

b. style.less

@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;
  }
}

c. style2.less

#abc {
  background: @primary_color;
  .rounded(10px);

  div {
    margin: 2px;
    color: blue;
  }
}

So the second stylesheet does load lazily, but it has the following parsing error in style2.less

".rounded is undefined"

.rounded is defined style.less, and since I haven't unloaded that sheet, I was thinking it should be still available to the compiler in the current environment.

To put it another way, we don't want to start fresh, or to unload existing definitions, but build on the styles already loaded. Thanks,

Colin

like image 288
hawkett Avatar asked Jul 08 '10 13:07

hawkett


1 Answers

I wasn't able to figure this out with the explanations above so I'll provide my own.

So first. Load in your Less stylesheet after the page loads. Something like this:

$('head').append('<link rel="stylesheet/less" href="path/to/yourDynamicStyles.less" />');

Great. Now select your stylesheet and push it into the collection of sheets that Less.js already has. It is expecting a DOM object so I used a jQuery selector.

less.sheets.push($('link[href="path/to/yourDynamicStyles.less"]')[0]);

If someone knows a better way to do that please educate me. (I had to add the [0] in order to get it to the right one.) If you do this in the console it will return a number. That number is how many sheets less knows about so hopefully it returned a number one higher then what you already had on page load.

Next part is easy. You tell Less.js to reload all of it's lessy goodness sheets, this includes the sheet you just added to its stack.

less.refresh();

And there you go. That should have just dynamically loaded a stylesheet and told Less to compile it. Hope this helps.

like image 158
MSaforrian Avatar answered Oct 03 '22 20:10

MSaforrian