### less > 它是CSS預編譯語言，和它類似的還有sass/stylus... > > css是標記語言，不是編程語言，沒有類、實例、函數、變量等東西； > 而less等預編譯語言就是讓css具備面向對象編程的思想； > 但是瀏覽器不能直接識別和渲染less代碼，需要我們把less代碼預先編譯為正常的css后，再交給瀏覽器渲染解析； ### less的編譯 - 在開發環境下編譯(產品沒有開發完，正在開發中，這個是開發環境) > 導入less.js即可 ``` //=>rel="stylesheet/less" 這塊有修改 <link rel="stylesheet/less" href="css/demo1.less"> //=>導入JS文件即可 <script src="js/less-2.5.3.min.js"></script> ``` - 在生產環境下編譯(產品開發完成了，需要部署到服務器上) > 項目上線，不能把less部署，這樣用戶每一次打開頁面都需要重新的編譯，非常耗性能，我們部署到服務器上的是編譯后的css ``` 1.在當前電腦的全局環境下安裝less模塊 $ npm install less -g 驗證是否安裝成功：$ lessc -v 2.基于命令把我們的less編譯成css $ lessc xxx/xxx.less xxx/xxx.min.css -x 把指定目錄中的less編譯成為css(并且實現了代碼的壓縮)， 把編譯后的css存入到具體指定路徑中的文件中；上線前在HTML中導入的是css文件； ``` - 目前基于webpack和框架實現工程化開發的時候，我們都是在webpack配置文件中， 配置出less的編譯（需要安裝less/less-loader等模塊）， 這樣不管是開發環境下的預覽，還是部署到生產環境下，都是基于webpack中的less模塊編譯的