為什么使用less

css已經(jīng)有很多新的東西學(xué)習(xí)了，為什么要學(xué)習(xí)less的知識。Github上很多項(xiàng)目都已經(jīng)在用，之前只是一知半解。less既然這么流行，那么肯定有css無法比擬的優(yōu)勢的。

經(jīng)過幾天的學(xué)習(xí)，發(fā)現(xiàn)less除了可以定義變量、嵌套、計(jì)算等使得重構(gòu)開發(fā)效率提高以外，還可以將一些常用的屬性組合定義一個(gè)函數(shù)，以便于開發(fā)時(shí)不用重復(fù)去書寫。這正好體現(xiàn)著"Less is more"的原則。在寫可復(fù)用動畫函數(shù)的時(shí)候，用less來寫css動畫庫很方便。工作中可以整理自己的一套，用的時(shí)候?qū)?shù)修改一下，就是可以快速創(chuàng)造出所需的動畫。

node中使用

• 全局 npm install less -g

• 項(xiàng)目文件夾 npm i less -save-dev

• 版本查詢 less -v 檢查是否安裝成功

• 擴(kuò)展 插件

例如，命令行中安裝 npm install less-plugin-clean-css
在代碼中使用 var pluginName = require("pluginName");的方式引入。

瀏覽器中引入方式

原生瀏覽器可以通過將以下代碼加入網(wǎng)頁的head部分，訪問出效果。

<link rel="stylesheet/less" type="text/css" href="yourfile.less"> 
<script src="https://cdn.bootcss.com/less.js/2.7.2/less.min.js"></script>

Safari瀏覽器打開本地網(wǎng)頁文件沒有問題，但是Google Chrome 引入本地資源文件需要開啟 "-allow-file-access-from-files" 命令行開關(guān)。

建議先在線試用或是本地app中編輯，這里提供一個(gè)在線編譯器 http://less2css.org/ 。

命令行編譯

npm安裝的less可以通過命令行的方式來編譯less文件到css文件，例如運(yùn)行'lessc your.less your.css'這樣的代碼。

更多的用法，輸入 'lessc -h' 獲取更多的幫助。

通過形如'@import “another.less”'的方式引入的文件，也會在編譯的時(shí)候自動引入編譯。

less核心功能

翻看 less 的官網(wǎng) ，發(fā)現(xiàn)無從下手。其實(shí)，less的強(qiáng)大之處在它的函數(shù)，函數(shù)是最重要的功能，分為 Misc ，String，List，Math，Type，Color幾類，其中Color類的函數(shù)最為常用，動畫函數(shù)庫主要是用這些函數(shù)來的實(shí)現(xiàn)的。

幾個(gè)例子

csslab（原名Lesslab）,從名字可以感覺出這里會有寶藏。來自芒果TV團(tuán)隊(duì)封裝的CSS動畫庫，這些例子會讓你有直觀的印象，例子放在CodePen，你可以編譯和修改，直接運(yùn)行看到效果，所見及所得。

項(xiàng)目中使用

Less 是 css 預(yù)處理器，通過npm安裝后，通過var less = require('less');的語句就可以在node中調(diào)用Less預(yù)編譯器。現(xiàn)在的前端項(xiàng)目都工程化，npm上有很多第三方的包，通過Express的中間件 Connect Middleware for Less.js 將less加入項(xiàng)目，grunt-contrib-less 定時(shí)運(yùn)行，gulp-less 減小打包后的體積。可用的選擇很多，適合項(xiàng)目的才是最好的。

webpack

前端項(xiàng)目現(xiàn)在流行的打包工具是 webpack，它的 loader 可以打包 js 以外的文件。欲知詳情，待看下一篇分解。