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

我目前正在研究在当前项目中使用css更改为LESS。在我提到这个问题之前，有几件事要提到的是：LESS（动态样式表语言）和资源加载器

1）该项目纯粹是客户端（Html/Js/Css），所以没有服务器端组件（虽然它有一个Web服务它调用通过CORS） 2）我通过资源加载框架加载几乎所有的东西，目前我使用yepnope

因此，考虑上述，我需要能够获得较少的款式要处理客户方，但由于我使用的资源加载器和更多的CSS /更少可能在初始页面加载发生后加载我想知道是否：

1）较少工作机智h使用客户端处理时的内容加载器？因为它说：

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个问题。

来源

2012-02-23 Grofit

是的，你可以。

阅读这篇文章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在你的开发环境，并把它放在一个文件。有很多选项。 easiests的方式是使用应用程序。您可以使用适用于Mac的http://incident57.com/less/等应用程序。你甚至可以在线编译：搜索“lessphp”。

来源

2012-02-23 10:50:11 Jaap

我知道服务器端解决方案，我只是想评估一些纯粹客户端的事情，因为一些分配的变量可能基于屏幕大小和一些其他客户端特定的信息，这些信息在服务器上不可用。但是，忘记我认为你已经解决了我的问题:) – Grofit 2012-02-23 11:36:39

你也可以在css/less中进行媒体查询，以根据屏幕大小设置样式。按宽度：http://www.w3.org/TR/css3-mediaqueries/#width 或通过heigth：http://www.w3.org/TR/css3-mediaqueries/#height – Jaap 2012-02-23 12:57:45

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

回答

相关问题