Question

我目前正在考虑在当前项目中使用css更改为LESS。在我提出问题之前要提到的一些事情是：

1）该项目纯粹是客户端（Html / Js / Css），因此网站没有服务器端组件（尽管它通过CORS调用了一个Web服务） 2）我通过资源加载框架加载几乎所有东西，目前我正在使用yepnope

因此，鉴于上述情况，我需要能够在客户端处理LESS样式，但是当我使用资源加载器时，在初始页面加载后可以加载更多css / less 发生了我想知道是否：

1）使用客户端处理时，内容加载器是否更少？正如它所说：

Client-side usage

Link your .less stylesheets with the rel set to “stylesheet/less”:

<link rel="stylesheet/less" type="text/css" href="styles.less">
Then download less.js from the top of the page, and include it in the <head> element of your page, like so:

<script src="less.js" type="text/javascript"></script>
Make sure you include your stylesheets before the script.

我认为我可以能够告诉yepnope如何处理更少的文件并为它们提供所需的元素属性。如果我可以提供较少的资源，那么在javascript之前就可以了吗？

2）是否有任何手动方式告诉它在javascript中处理什么？

这将涵盖为当前页面加载所有内容的情况，用户单击一个按钮，动态加载显示在当前页面中的新模板，此可能需要更少的资源要加载，但是已经包含了less.js文件。

希望以上内容为您提供了一些关于我想要做什么和2个问题的背景。

Answer 1

是的，你可以。

阅读这篇文章Load less.js rules dynamically并稍微调整一下：

less.sheets.push(document.getElementById('new-style-1'));
// Add the new less file to the head of your document    
var newLessStylesheet = $("<link />").attr("id", "new-style-1").attr("href", "/stylesheets/style.less").attr("type", 'text/less');
$("head").append(newLessStylesheet);
// Have less refresh the stylesheets
less.refresh(true);

您还可以在开发环境中生成所有CSS并将其放在一个文件中。有很多选择。最简单的方法是使用一个应用程序。您可以在Mac上使用http://incident57.com/less/等应用。你甚至可以在线编译：搜索“lessphp”。

LESS（动态样式表语言）和资源加载器

1 个答案: