less.js懒惰的纸张装载

本文介绍了less.js懒惰的纸张装载的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想知道是否有办法在之后的某个时间加载单个表页面加载。的答案解释了如何重新加载所有工作表，但供我使用 - 现有的工作表从不依赖于新加载的工作表，最好只是懒惰地添加工作表。我在想像

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);

可能代表可能的API？干杯，

might represent a possible API? Cheers,

Colin

更新2010年12月3日：

UPDATE 3rd Dec 2010:

我尝试过Livingston Samuel对less.js代码库的修复，虽然它确实有效，但它似乎无法识别已经加载的样式表中的定义。以下是我的示例文件

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

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

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

c. style2.less

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

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

所以第二个样式表确实加载懒惰，但它有style2.less

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

。四舍五入未定义

.rounded是定义的样式。更少，因为我没有卸载该表，我认为它应该仍然可用于当前环境中的编译器。

.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

推荐答案

我无法想象以上解释如此，我将提供自己的解释。

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

首先。页面加载后加载到Less样式表中。这样的事情：

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" />');

太棒了。现在选择样式表并将其推送到Less.js已有的工作表集合中。它期待一个DOM对象所以我使用了jQuery选择器。

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]);

如果有人知道更好的方法，请教育我。（我必须添加[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.

下一部分很容易。你告诉Less.js重新加载所有这些小小的善良表，这包括你刚刚添加到其堆栈中的表格。

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();

你去吧。这应该只是动态加载样式表，并告诉Less编译它。希望这会有所帮助。

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

这篇关于less.js懒惰的纸张装载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！