1、直接引入less.js

使用步驟：

1、到less官網，下載less檔案

2、在編譯器中新建一個less檔案，引入到我們的html頁面中（注意下面的和css的引入方式稍微有些不同哦，看rel）

<link href="css/style.less" rel="stylesheet/less"/>

3、引入我們下載的less檔案

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

好處：能獲取到客戶端的資料，從而進一步計算

壞處：在客戶端解析less，造成效能浪費，不利於維護（不推薦）

2、koala編譯器

使用步驟：

1、在koala-app.com中下載軟體就可以

2、開啟koala軟體，然後將我們的less所在的資料夾拖拽到軟體中

3、koala會自動讀到less檔案，然後點選less檔案，單擊右鍵，選擇輸出的路徑以及編譯後的css檔名，之後在右側選單欄點選執行編譯即可（上面的選項，只要把自動編譯勾選即可，輸出方式可以選擇normal也可以選擇compress（壓縮）的方式，搜可以，其他的不需要管）

4、編譯成功，會在我們指定的資料夾中生成一個css檔案，之後將這個css檔案引入我們的html檔案中即可

（推薦小白使用）

3、在伺服器環境編譯  利用node中的包管理器

使用步驟：

1、需要下載安裝node環境，檢測安裝成功的方法在命令列輸入npm，如果安裝成功就會有一些資訊，錯了，就會報錯

簡單說一下開啟命令列的方法（windows系統）win+R——輸入cmd——enter——進入命令列——輸入npm——按enter鍵

安裝less:在命令列輸入命令：npm i  -g [email protected]之後按回車即可（檢驗是否安裝成功，在命令列輸入lessc，然後回車，安裝成功會有一些資訊，失敗也會報錯）

然後在命令列中進入我們存放less檔案所在的資料夾，進入之後輸入（如果我們的less檔名為style.less）lessc  style.less > index.css（大於號後面是我們想要style.less編譯為的css的檔名，我們這裡把它命名為index.css）之後點選回車，我們的資料夾就會多一個index.css檔案，之後也是引入css檔案即可

4、在編譯器中實時編譯（配置稍微麻煩，但本人比較喜歡這一種）

這種方法也需要安裝node，之後用npm安裝less，和上面的安裝方法一樣

win+R——輸入cmd——enter——進入命令列——輸入npm——按enter鍵——npm i  -g [email protected]之後按回車即可

然後開啟我們的編譯器（以webstorm為例，其他的也都大同小異）

點選檔案（File）——找到Tools——File Watchers——找到右側有個加號（+）——單擊加號找到less選擇less——彈出一個選單，找到Program:後面讓選擇程式，找到我們安裝的less程式

注：找到程式的方法：先找到C盤——users——使用者（也可能是你的名字,自己起的）——AppData（如果這裡找不到的話，可以找到這個選單上面幾個圖示中的最後一個（Show Hidden Files and Directiories）即可找到）——Roaming——npm——lessc.cmd，選中之後，其它的不用管直接點選ok，然後再點ok即可

之後我們再去建一個less檔案，它就會自動生成一個同名的css檔案，把這個css檔案引入我們的HTML檔案中即可

我比較喜歡第四種，在實際的專案中，比較推薦的也是最後兩種方法，對於初學者可能稍微麻煩，但熟悉之後就特別簡單了