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（動態樣式表語言）和資源加載器

回答

相關問題