LESS - 在瀏覽器中使用 LESS

當您需要動態編譯 LESS 檔案而不是在伺服器端編譯時，LESS 用於瀏覽器；這是因為 LESS 是一個大型 JavaScript 檔案。

首先，我們需要新增 LESS 指令碼以便在瀏覽器中使用 LESS：

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

為了找到頁面上的 style 標籤，我們需要在頁面上新增以下程式碼行。它還會建立包含已編譯 CSS 的 style 標籤。

<link href = "styles.less" rel = "stylesheet/less" type = "text/css"/>

設定選項

在 script 標籤之前，可以在 less 物件上以程式設計方式設定選項。這將影響所有 less 的程式設計用法和初始連結標籤。

例如，我們可以按如下方式設定選項：

<script>
   less = {
      env: "development"
   };
</script>

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

我們也可以在 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 < script 標籤 < link 標籤 是重要性級別。
資料屬性不能使用駝峰命名法；連結標籤選項表示為時間選項。
具有非字串值的資料屬性應為 JSON 有效的。

觀察模式

可以透過將 env 選項設定為 development 並新增 less.js 檔案後呼叫 less.watch() 來啟用觀察模式。如果您想臨時啟用觀察模式，則向 URL 新增 #!watch。

<script>less = { env: 'development'};</script>
<script src = "less.js"></script>
<script>less.watch();</script>

修改變數

啟用了 LESS 變數的執行時修改。呼叫新值時，LESS 檔案將重新編譯。以下程式碼顯示了修改變數的基本用法：

less.modifyVars({
   '@buttonFace': '#eee',
   '@buttonText': '#fff'
});

除錯

我們可以向 url 新增選項 !dumpLineNumbers:mediaquery 或如上所述新增 dumpLineNumbers 選項。mediaquery 選項可與 FireLESS 一起使用（它顯示 LESS 生成的 CSS 樣式的原始 LESS 檔名和行號）。

選項

在載入指令碼檔案 less.js 之前，必須在全域性 less 物件中設定選項。

<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 - 字串型別。當設定 dumpLineNumbers 時，會在輸出的 css 檔案中新增原始碼行資訊。這有助於除錯特定規則的來源。
env - 字串型別。env 可以在開發或生產環境中執行。當文件 URL 以 file:// 開頭或位於本地計算機上時，會自動設定 Development。
errorReporting - 編譯失敗時，可以設定錯誤報告方法。
fileAsync - 布林型別。當頁面存在檔案協議時，它可以請求是否非同步匯入。
functions - 物件型別。
logLevel - 數字型別。它在 javascript 控制檯中顯示日誌級別。
- 2：資訊和錯誤
- 1：錯誤
- 0：無
poll - 在觀察模式下，時間以毫秒顯示輪詢之間的間隔。它是整數型別；預設設定為 1000。
relativeUrls - 調整 URL 為相對 URL；預設情況下，此選項設定為 false。這意味著 URL 已經相對於入口 less 檔案。
globalVars - 將全域性變數列表插入程式碼中。字串型別變數應包含在引號中。
modifyVars - 與全域性變數選項不同。它將宣告移動到 less 檔案的末尾。
rootpath - 在每個 URL 資源的開頭設定路徑。
useFileCache - 使用每個會話的檔案快取。less 檔案中的快取用於呼叫 modifyVars，其中所有 less 檔案都不會再次檢索。

列印頁面