三十分鐘學會 Less
每一門技術的出現都是為了解決現存的問題，同樣的，Less 的出現是為了解決 CSS 中過於呆板的寫法。Less 官方文件 中對 Less 的使用有詳細的介紹，總結一下為：Less = 變數 + 混合 + 函式。如果你對 js 和 css 有所瞭解，那麼就可以很快
的
掌握並在你的專案中使用 Less。
一、Less 使用初體驗
1. 使用 Less 寫樣式
使用 Npm 全域性安裝 Less
$ npm install less -g
建立一個空資料夾，這裡命名為：
learn-less
在根目錄下建立 index。html 檔案，複製內容如下：
<！doctype html>
在根目錄下建立 main。less 檔案，複製內容如下：
// main。less@width： 100%；@height： 100px；@color： red；。container{ width： @width； height： @height； background-color： @color； margin-bottom： 5px； }。container2{ width： @width； height： @height； background-color： @color； margin-bottom： 5px；}。container3{ width： @width； height： @height； background-color： @color； margin-bottom： 5px；}
現在開啟瀏覽器看一下，會發現並沒有載入樣式。這是因為 index。html 中引入的樣式檔案是 main。css 而不是 main。less。所以接下來，我們需要將 main。less 轉換為 main。css，不用擔心，這一步驟並不需要你手動操作，僅僅是執行一條命令就會自動完成轉換。
$ lessc main。less
操作完以上步驟就會發現在根目錄下生成了一個 main。css 檔案，此時再開啟瀏覽器看看，樣式已經出現了。
main。css 轉義內容為：
。container { width： 100%； height： 100px； background-color： red； margin-bottom： 5px；}。container2 { width： 100%； height： 100px； background-color： red； margin-bottom： 5px；}。container3 { width： 100%； height： 100px； background-color： red； margin-bottom： 5px；}
如果你使用了 Webstorm 作為開發工具，那麼連手動輸入命令列這一步都可以跳過，因為 Webstorm 會在你的 。less 檔案被修改後自動生成對應的 。css 檔案，具體配置跳轉：Webstorm 配置 Less 自動轉譯成 css
2. 感受 Less 的便利
現在有一個新的需求，需要將三個 div 的背景顏色改成藍色（blue），如果是之前 css 的寫法需要依次找到 container、container2、container3，對應修改裡面的 background-color 屬性，但是使用 less 我們僅僅修改前面定義過的變數值即可。
// main。less@width： 100%；@height： 100px；@color： blue；。。。
使用
lessc main。less
進行轉譯後開啟瀏覽器可以看到三個 div 的背景顏色已經被改變了。
二、變數
在前面介紹的案例中已經使用了“變數”的概念，是不是感覺和 js 很像，事實上 less 就是用 js 的寫法來寫 css。
官網在介紹變數的時候會給出很多應用場景，總結一下就是使用 @ 符號定義變數，使用 @ 符號獲取變數，僅僅將
@變數名
看成是一個字串。
@classname： main；@color： red；。@classname{ background-color： @color；}
從上面例子中可以看到，變數不僅僅可以作為樣式屬性值：
background-color： @color；
，還可以作為類名：
。@classname
表示的就是
。main
。這也就是為什麼說
僅僅將 @變數名 看成是一個字串。
三、混合
先看一個 example。css 檔案：
#menu a { color： #111； border-top： dotted 1px black； border-bottom： solid 2px black；}#menu span { height： 16px； border-top： dotted 1px black； border-bottom： solid 2px black；}#menu p { color： red； border-top： dotted 1px black； border-bottom： solid 2px black；}
可以看到上面三個樣式中都有
border-top
和
border-bottom
兩個屬性，並且內容完全相同；在傳統 CSS 寫法中只能這樣一遍有一遍的去書寫重複的內容，在 Less 中透過
將公共屬性抽取出來作為一個公共類
的方式規避這一點。
// example2。less。bordered { border-top： dotted 1px black； border-bottom： solid 2px black；}#menu a { color： #111； 。bordered；}#menu span { height： 16px； 。bordered；}#menu p { color： red； 。bordered（）；}
將以上 example2。less 進行轉譯成 example2。css 檔案為：
。bordered { border-top： dotted 1px black； border-bottom： solid 2px black；}#menu a { color： #111； border-top： dotted 1px black； border-bottom： solid 2px black；}#menu span { height： 16px； border-top： dotted 1px black； border-bottom： solid 2px black；}#menu p { color： red； border-top： dotted 1px black； border-bottom： solid 2px black；}
可以看到 examle2。css 與 example。css 很相似，只是多了一個 。bordered 樣式。
修改 example2。less，將 。bordered 寫成 。bordered（），此時在進行轉譯之後會看到 example2。css 和 example。css 檔案就完全一樣了，使用 less 書寫更加簡單。
// example2。less。bordered（） { border-top： dotted 1px black； border-bottom： solid 2px black；}。。。
總結：
混合也是減少程式碼書寫量的一個方法；
混合的類名在定義的時候加上
小括弧 （）
，那麼在轉譯成 css 檔案時就不會出現；
混合的類名在被呼叫的時候加上
小括弧 （）
和不加上
小括弧 （）
是一樣的效果，看個人習慣，如：第三行和第八行轉譯成 css 是一樣的。
1 #menu span {
2 height： 16px；
3 。bordered；
4 }
5
6 #menu p {
7 color： red；
8 。bordered（）；
9 }
四、函式
曾幾何時，在書寫呆板的 css 時有沒有想過讓類名動態化，根據不同的引數生成不同的樣式。看下面的示例：
// func。less。border-radius（@radius） { -webkit-border-radius： @radius； -moz-border-radius： @radius； border-radius： @radius；}#header { 。border-radius（4px）；}。button { 。border-radius（6px）；}
使用
$ lessc func。less
進行轉譯 func。css 檔案內容如下：
#header { -webkit-border-radius： 4px； -moz-border-radius： 4px； border-radius： 4px；}。button { -webkit-border-radius： 6px； -moz-border-radius： 6px； border-radius： 6px；}
可以看到，這裡就用到了函式的概念，在
#header
和
。button
中分別傳入不同的引數，結果也就生成不同的程式碼。
關於 less 中函式的寫法還有以下幾種：
// 函式的引數設定預設值：。border-radius（@radius： 5px） { -webkit-border-radius： @radius； -moz-border-radius： @radius； border-radius： @radius；}// 函式有多個引數時用分號隔開。mixin（@color； @padding：2） { color-2： @color； padding-2： @padding；}// 函式如果沒有引數，在轉譯成 css 時就不會被打印出來，詳見上面混合中的示例。wrap（） { text-wrap： wrap；}// 函式引數如果有預設，呼叫時就是透過變數名稱，而不是位置。mixin（@color： black； @margin： 10px； @padding： 20px） { color： @color； margin： @margin； padding： @padding；}。class1 { 。mixin（@margin： 20px； @color： #33acfe）；}// 函式引數有個內建變數 @arguments，相當於 js 中的 arguments。box-shadow（@x： 0； @y： 0； @blur： 1px； @color： #000） { -webkit-box-shadow： @arguments； -moz-box-shadow： @arguments； box-shadow： @arguments；}// 函式名允許相同，但引數不同，類似於 java 中多型的概念。mixin（@color： black） { 。mixin（@color： black； @margin： 10px） {
當然，上面是開發人員自定義的函式，Less 也為我們定義了很多好用的內建函式。關於內建函式，如果掌握，可以在開發過程中節約很多時間，由於內建函式數量很多，這裡就不一一介紹，傳送門：Less 內建函式官方文件［https：//less。bootcss。com/functions/］。
五、父子元素的寫法
在 css 中父子元素的寫法通常如下：
。container { padding： 0；}。container 。article { background-color： red；}
在 Less 寫法如下，父子巢狀關係一目瞭然。
。container { padding： 0； 。article { background-color： red； }}
當然，父子元素還要一種是偽類的寫法，在 css 中寫法如下：
#header ：after { content： “ ”； display： block； font-size： 0； height： 0； clear： both； visibility： hidden；}
在 less 中寫法如下，可以看到引入了新的符號
&
，以
&
來代替主類
#header
。
#header { &：after { content： “ ”； display： block； font-size： 0； height： 0； clear： both； visibility： hidden； }}
六、神奇 @import
在傳統 css 檔案中，每個檔案都是獨立的。在 less 中可以像 js 的模組那樣在一個 less 檔案中引入另一個 less 檔案。
建立 one。less 檔案：
。container { width： 100px； height： 200px；}
建立 two。less 檔案：
@import “one”；
使用
$ lessc two。less
轉譯成
two。css
檔案，可以看到內容如下：
。container { width： 100px； height： 200px；}
@import 的作用可以看成是將 one。less 的內容複製一份到當前 。less 檔案中。
那麼如果 two。less 中也有一個類名叫 container 的，使用 @import 之後會變成什麼樣子呢？這個留給自行測試好啦。
轉載自作者：dkvirus
