三十分鐘學會 Less

每一門技術的出現都是為了解決現存的問題，同樣的，Less 的出現是為了解決 CSS 中過于呆闆的寫法。​​Less 官方文檔​​ 中對 Less 的使用有詳細的介紹，總結一下為：Less = 變量 + 混合 + 函數。如果你對 js 和 css 有所了解，那麼就可以很快的掌握并在你的項目中使用 Less。

使用 Npm 全局安裝 Less

建立一個空檔案夾，這裡命名為：​<code>​learn-less​</code>​

在根目錄下建立 index.html 檔案，複制内容如下：

在根目錄下建立 main.less 檔案，複制内容如下：

現在打開浏覽器看一下，會發現并沒有加載樣式。這是因為 index.html 中引入的樣式檔案是 main.css 而不是 main.less。是以接下來，我們需要将 main.less 轉換為 main.css，不用擔心，這一步驟并不需要你手動操作，僅僅是運作一條指令就會自動完成轉換。

操作完以上步驟就會發現在根目錄下生成了一個 main.css 檔案，此時再打開浏覽器看看，樣式已經出現了。

main.css 轉義内容為：

如果你使用了 Webstorm 作為開發工具，那麼連手動輸入指令行這一步都可以跳過，因為 Webstorm 會在你的 .less 檔案被修改後自動生成對應的 .css 檔案，具體配置跳轉：​​Webstorm 配置 Less 自動轉譯成 css​​

現在有一個新的需求，需要将三個 div 的背景顔色改成藍色（blue），如果是之前 css 的寫法需要依次找到 container、container2、container3，對應修改裡面的 background-color 屬性，但是使用 less 我們僅僅修改前面定義過的變量值即可。

使用 ​<code>​lessc main.less​</code>​ 進行轉譯後打開浏覽器可以看到三個 div 的背景顔色已經被改變了。

在前面介紹的案例中已經使用了“變量”的概念，是不是感覺和 js 很像，事實上 less 就是用 js 的寫法來寫 css。

官網在介紹變量的時候會給出很多應用場景，總結一下就是使用 @ 符号定義變量，使用 @ 符号擷取變量，僅僅将 ​<code>​@變量名​</code>​ 看成是一個字元串。

從上面例子中可以看到，變量不僅僅可以作為樣式屬性值：​<code>​background-color: @color;​</code>​，還可以作為類名：​<code>​.@classname​</code>​ 表示的就是 ​<code>​.main​</code>​。這也就是為什麼說​<code>​僅僅将 @變量名 看成是一個字元串。​</code>​

先看一個 example.css 檔案：

可以看到上面三個樣式中都有 ​<code>​border-top​</code>​ 和 ​<code>​border-bottom​</code>​ 兩個屬性，并且内容完全相同；在傳統 CSS 寫法中隻能這樣一遍有一遍的去書寫重複的内容，在 Less 中通過​<code>​将公共屬性抽取出來作為一個公共類​</code>​的方式規避這一點。

将以上 example2.less 進行轉譯成 example2.css 檔案為：

可以看到 examle2.css 與 example.css 很相似，隻是多了一個 .bordered 樣式。

修改 example2.less，将 .bordered 寫成 .bordered()，此時在進行轉譯之後會看到 example2.css 和 example.css 檔案就完全一樣了，使用 less 書寫更加簡單。

總結：

混合也是減少代碼書寫量的一個方法；

混合的類名在定義的時候加上<code>小括弧 ()</code>，那麼在轉譯成 css 檔案時就不會出現；

混合的類名在被調用的時候加上<code>小括弧 ()</code>和不加上<code>小括弧 ()</code>是一樣的效果，看個人習慣，如：第三行和第八行轉譯成 css 是一樣的。

<code>1 #menu span { 2 height: 16px; 3 .bordered; 4 } 5 6 #menu p { 7 color: red; 8 .bordered(); 9 }</code>

曾幾何時，在書寫呆闆的 css 時有沒有想過讓類名動态化，根據不同的參數生成不同的樣式。看下面的示例：

使用 ​<code>​$ lessc func.less​</code>​ 進行轉譯 func.css 檔案内容如下：

可以看到，這裡就用到了函數的概念，在 ​<code>​#header​</code>​ 和 ​<code>​.button​</code>​ 中分别傳入不同的參數，結果也就生成不同的代碼。

關于 less 中函數的寫法還有以下幾種：

當然，上面是開發人員自定義的函數，Less 也為我們定義了很多好用的内置函數。關于内置函數，如果掌握，可以在開發過程中節約很多時間，由于内置函數數量很多，這裡就不一一介紹，傳送門：​​Less 内置函數官方文檔​​。

在 css 中父子元素的寫法通常如下：

在 Less 寫法如下，父子嵌套關系一目了然。

當然，父子元素還要一種是僞類的寫法，在 css 中寫法如下：

在 less 中寫法如下，可以看到引入了新的符号 ​<code>​&amp;​</code>​，以 ​<code>​&amp;​</code>​ 來代替主類 ​<code>​#header​</code>​。

在傳統 css 檔案中，每個檔案都是獨立的。在 less 中可以像 js 的子產品那樣在一個 less 檔案中引入另一個 less 檔案。

建立 one.less 檔案：

建立 two.less 檔案：

使用 ​<code>​$ lessc two.less​</code>​ 轉譯成 ​<code>​two.css​</code>​ 檔案，可以看到内容如下：

@import 的作用可以看成是将 one.less 的内容複制一份到目前 .less 檔案中。

那麼如果 two.less 中也有一個類名叫 container 的，使用 @import 之後會變成什麼樣子呢？這個留給自行測試好啦。