Less 在瀏覽器中使用
Less可以在客戶端上運行(IE6+、Webkit、Firefox),也可以在服務端運行(Node.js、Rhino)。
less在瀏覽器中使用,當你想編譯less文件動態地需要而不是在服務器端,這是因為less是一個大的javascript文件。
首先,我們需要添加LESS腳本以在瀏覽器中使用LESS:
<script src="less.js"></script>
要在頁面上找到樣式標簽,我們需要在頁面上添加以下行。它還創建帶有編譯css的樣式標簽。
<link href="styles.less" rel="stylesheet/less" type="text/css"/>
設置選項
在腳本標記之前,可以通過編程方式在較少的對象上設置選項。它將影響less的所有編程使用和初始鏈接標記。
例如,我們可以設置選項如下:
<script>
less = {
env: "development"
};
</script>
<script src="less.js"></script>
我們還可以在腳本標記上以其他格式設置選項,如下所示:
<script>
less = {
env: "development"
};
</script>
<script src="less.js" data-env="development"></script>
您還可以將此選項添加到鏈接標記中。
<link data-dump-line-numbers="all" data-global-vars='{ "var": "#fff", "str": "\"quoted\"" }' rel="stylesheet/less" type="text/css" href="less/style.less">
屬性選項的要點如下:
window.less是重要性級別。
無法在camel中寫入數據屬性,并將鏈接標記選項表示為時間選項。
具有非字符串值的數據屬性應為JSON有效。
觀看模式
可以通過將 env 選項設置為開發并在添加less.js文件后調用 less.watch()來啟用觀看模式 。 如果您希望暫時啟用觀看模式,請將#!watch 添加到網址。
<script>less = { env: 'development'};</script>
<script src="less.js"></script>
<script>less.watch();</script>
修改變量
啟用LESS變量的運行時修改。當調用新值時,LESS文件被重新編譯。修改變量的基本用法是:
less.modifyVars({
'@buttonFace': '#eee',
'@buttonText': '#fff'
});
調試
我們可以將選項!dumpLineNumbers:mediaquery添加到上面提到的url或dumpLineNumbers選項。mediaquery選項可與FireLESS一起使用(它顯示LESS生成的CSS樣式的原始LESS文件名和行號。)
選項
在加載腳本文件less.js之前,必須在全局少于對象中設置選項。
<script>
less = {
env: "development",
logLevel: 2,
async: false,
fileAsync: false,
poll: 1000,
functions: {},
dumpLineNumbers: "comments",
relativeUrls: false,
globalVars: {
var1: '"string value"',
var2: 'regular value'
},
rootpath: ":/a.com/"
};
</script>
<script src="less.js"></script>
async:它是一個布爾類型。無論是否使用選項async,都會請求導入的文件。默認為false。
dumpLineNumbers:這是一個字符串類型。在輸出css文件中,當設置dumpLineNumbers時,將添加源行信息。它有助于調試特定規則來自。
env:這是一個字符串類型。env可以在開發或生產上運行。當文檔URL以file://開頭或位于本地計算機中時,會自動設置開發。
errorReporting:當編譯失敗時,請設置錯誤報告方法。
fileAsync:它是一個布爾類型。當一個頁面與文件協議,然后它請求是否異步導入。
functions:它是對象類型和用戶函數。
logLevel:它是一種數字類型。它在javascript控制臺中顯示日志記錄級別。
2:信息和錯誤
1:錯誤
0:沒有
poll:在手表模式下,輪詢之間的時間以毫秒為單位。它是一個整數類型,默認情況下設置為1000。
relativeUrls:網址調整為相對,默認情況下,它設置為false,這意味著網址已經相對于條目少文件。它是一個布爾類型。
globalVars:將全局變量列表插入代碼。字符串類型變量應該包含在引號中。
modifyVars:它與全局變量選項相反,它移動您的less文件末尾的聲明。
rootpath:它設置每個URL資源開始時的路徑。
useFileCache:使用每個會話文件緩存。較少文件中的緩存用于調用modifyVars,其中所有較少的文件將不會再次檢索。