Less 在瀏覽器中使用

Less可以在客戶端上運行（IE6+、Webkit、Firefox），也可以在服務端運行（Node.js、Rhino）。

less在瀏覽器中使用，當你想編譯less文件動態(tài)地需要而不是在服務器端，這是因為less是一個大的javascript文件。

首先，我們需要添加LESS腳本以在瀏覽器中使用LESS:

<script src="less.js"></script>

要在頁面上找到樣式標簽，我們需要在頁面上添加以下行。 它還創(chuàng)建帶有編譯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 選項設置為開發(fā)并在添加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時，將添加源行信息。 它有助于調試特定規(guī)則來自。

• env:這是一個字符串類型。 env可以在開發(fā)或生產上運行。 當文檔URL以 file:// 開頭或位于本地計算機中時，會自動設置開發(fā)。 

• errorReporting:當編譯失敗時，請設置錯誤報告方法。

• fileAsync:它是一個布爾類型。 當一個頁面與文件協議，然后它請求是否異步導入。

• functions:它是對象類型和用戶函數。

• logLevel:它是一種數字類型。 它在javascript控制臺中顯示日志記錄級別。

  • 2:信息和錯誤

  • 1:錯誤

  • 0:沒有

• poll:在手表模式下，輪詢之間的時間以毫秒為單位。 它是一個整數類型，默認情況下設置為1000。

• relativeUrls:網址調整為相對，默認情況下，它設置為false，這意味著網址已經相對于條目少文件。 它是一個布爾類型。

• globalVars:將全局變量列表插入代碼。 字符串類型變量應該包含在引號中。

• modifyVars:它與全局變量選項相反，它移動您的less文件末尾的聲明。

• rootpath:它設置每個URL資源開始時的路徑。

• useFileCache:使用每個會話文件緩存。 較少文件中的緩存用于調用modifyVars，其中所有較少的文件將不會再次檢索。