前言：最近幫一個朋友解決點問題，在檢視元件源碼的時候涉及到了less文法，這可難倒部落客了。沒辦法，既然用到就要學呗，誰讓咱是無所不能的程式猿呢！是以今天來學習下Less，算是筆記，也希望給初學less的園友提供參考，如果你是前端大神，此文就沒必要看了哈。算了，扯遠了哈，進入正題。
本文原創位址：http://www.cnblogs.com/landeanfen/p/6047031.html
Less 是一門 CSS 預處理語言，它擴充了 CSS 語言，增加了諸如變量、混合（mixin）、函數等功能，讓 CSS 更易維護、友善制作主題、擴充。Less 可以運作在 Node 或浏覽器端。
Less是一門動态CSS語言，使得CSS樣式更加靈活地作用于Html标簽。試想如果沒有Less，我們要對樣式做一些邏輯計算的時候隻能依靠Js去實作，有了Less之後，可以友善地動态給Html标簽設定樣式。比如一個最常見的需求，在目前浏覽器的寬度小于500px的時候，給某一個div設定一個樣式，使用less+css3就能很簡單的解決問題。當然，這隻是其中一個場景，less裡面還能進行一些常見的條件和邏輯判斷。總的來說，Less賦予了CSS邏輯運算的能力。
除此之外，動态CSS文法還有一個重要的作用就是提高樣式代碼的可維護性。比如一個最簡單的，我們可以定義一個全局的顔色變量@aaa:#222，系統裡面所有的預設顔色用的@aaa來寫的，這個時候如果需要修改這個全局顔色，我們隻需要改下@aaa變量的值就好了，其他地方不用做任何修改，這點，作為程式設計人員應該很容易了解。
說一千道一萬，實踐才是王道，下面跟着部落客一起來看看一些Less最基礎的用法吧。
說到Less，可能又有人不服了，可能有人要說：Less過時了，Sass是趨勢，你看bootstrap3用的是less，怎麼bootstrap4就改用sass了等等。部落客想，它們三者作為Css的預處理技術，肯定都有自己的優勢吧。今天在這裡不想讨論三者的優缺點，先來學習Less吧，想那麼多幹嘛！
關于Less的入門教程，網上也是一搜一大把，基本都和Less中文網上面差不多。Less既可以運作在Node服務端，也可以運作在浏覽器用戶端。部落客對Node不熟，是以這篇還是看看其在浏覽器端的使用，其實沒有關系，不管在哪裡使用，其基礎的用法都是一樣的。
一般來說，用戶端運作Less分為兩種情況：
第一種方式是直接在html頁面引用.less檔案，然後借助less.js去編譯less檔案動态生成css樣式而存在于目前頁面，這種方式适用于開發模式。
第二種方式是我們首先寫好.less檔案的文法，然後借助工具生成對應的.css檔案，然後用戶端直接引用.css檔案即可。比如我們常用的bootstrap.css就是通過工具編譯而成，這種方式更适合運作環境。
或者你如果不想去下載下傳less.js檔案，也可以直接使用CDN的方式引用less.js，部落客就是這麼做的。
需要說明的是，less.js的作用就是編譯less.less檔案，使它成為浏覽器能讀懂的css樣式。
這裡要強調的是，less變量的聲明必須要在less.js的引用之前。
我們直接運作項目，得到如下結果
如果你的調試環境不是Visual Studio，就不會有這個問題！對于上述問題，需要在web.config裡面配置如下節點
然後再次運作，可以看到編譯生成的css如下
如果是運作環境，最好是将less.less編譯成.css檔案，然後直接引用生成的.css檔案即可，部落客不熟悉Node的環境，這裡，部落客介紹一款less生成css的工具：Koala。首先去官網下載下傳安裝檔案，安裝運作之後得到如下界面：
然後将less所在的目錄拖到界面中間
點選Compile按鈕。将會在less.less的同級目錄下生成一個less.css檔案
然後直接引用這個css檔案即可。有了工具是不是很easy~~
初初入門，我們還是從最基礎的開始吧！
頁面html代碼：
編譯之後的Css樣式如下：
效果預覽：
以上是一個最基礎的Less變量，在.less檔案裡面定義一個全局的@base變量，那麼在該檔案裡面所有地方均可調用。
需要說明的是（1）Less裡面的變量都是以@作為變量的起始辨別，變量名由字母、數字、_和-組成；（2）在一個檔案裡面定義的同名變量存在全局變量和局部變量的差別（後面介紹）；
編譯得到結果：
這說明，在Less裡面，變量可以動态計算。
混合可以将一個定義好的class A輕松的引入到另一個class B中，進而簡單實作class B繼承class A中的所有屬性。我們還可以帶參數地調用，就像使用函數一樣。我們來看下面的例子：
編譯後的結果你是否猜到了呢：
原了解析：最上面的 @radius 變量可以了解為一個方法的參數，然後“15px”可以了解為參數的預設值。首先我們定義一個動态樣式 .rounded-corners ，這個樣式有一個動态的參數 @radius ，這個參數的預設值是“15px”。我們調用的時候如果不傳參數，那麼 @radius 就等于15px，如果我們傳了30px，那麼@radius就是我們傳的參數值。如果這樣了解是否會好一點呢，是不是有點類似我們程式設計裡面的“方法”的概念。如果按照面向對象的原理也很好了解，#div1和#div2繼承.rounded-corners這個樣式，是以可以直接使用，然後如果“子類”(#div2)有不同于“父類”的屬性，可以“重寫”，是不是一樣一樣的。
既然做了測試，我們還是來看看測試結果：
在CSS裡面，我們也經常可以見到标簽樣式嵌套的寫法，那麼在Less裡面它是怎麼實作的呢？我們來下下面的Less代碼
編譯後的CSS：
Less的這種寫法好處是顯而易見，标簽層級結構清晰可見，并且能減少css代碼量。但部落客猜想肯定有人會不習慣這種寫法，就是因為這種結構層級深，是以在閱讀上面還是會有人不習慣，不管怎麼樣，且用且珍惜吧。
在Less裡面函數的概念還是比較容易了解的。比如我們有這麼一段定義：
然後有這麼一句調用
編譯得到
以上不難了解，就是一個簡單的邏輯判斷。
在上述“函數的使用”裡面，我們看到Less支援“等于”的比對方式，除此之外，Less裡面還支援大于、小于等條件判斷的文法，此之所謂“導引混合”。先來看看它的文法：
首先定義幾個條件判斷的“方法”
然後調用該“方法”
你猜結果是什麼？編譯結果如下：
原了解析：不知道你有沒有猜對結果，反正最開始部落客是猜錯了的。when的文法不難了解，就是一個條件判斷，關鍵是下面的color從哪裡來的。原來在Less裡面是一種混合調用的方式，也就是說，如果定義了三個函數mixin，分别對應有三個不同的條件，那麼我們調用mixin函數的時候如果三個的條件都滿足，那麼它三個的結果都會得到。這就是為什麼我們class1和class2得到如上結果。在Less裡面所有的運算符有： <code>>、 >=、 =、 =<、 <，除了這5個運算符，Less還提供了基于值類型進行判斷的方法：</code><code>iscolor()、</code><code>isnumber()、</code><code>isstring()、</code><code>iskeyword()、</code><code>isurl()等。用法如下：</code>
除了上述條件表達式以外，Less還提供了and、not等邏輯表達式。基礎用法如：
Less的作用域很好了解，就是我們常說的全局變量和局部變量的差別，記住Less裡面變量名可以重複。
相信你已經猜到結果了吧。編譯之後
less裡面使用import将外部的less引入到本地less檔案裡面來。比如A.less裡面定義了一個變量@aaa:red，而B.less檔案裡面也需要使用@aaa這個變量，這個時候怎麼辦呢？import派上用場了。
A.less内容如下：
B.less内容如下：
然後再html頁面引入B.less檔案，編譯最終可以得到如下結果
有人可能要說，不就是引用其他less檔案裡面的變量嗎，沒啥用。可是你想過沒有，由于項目裡面子產品很多，每個子產品都有自己的less檔案，如果沒有import，怎麼去統一排程呢。這點從bootstrap就可以看出來，當我們下載下傳bootstrap3的源碼，你會發現有很多的less檔案，放在less檔案夾裡面，這些less檔案分别對應着各個子產品的樣式。形如
各個子產品的樣式寫完後，會有一個bootstrap.less檔案，将其他所有的less檔案都import進來，其内容如下：
然後我們編譯bootstrap.less，就能将所有子產品的less檔案引入進來。
為了證明這點，我們來測試一把，在A.less裡面加入如下内容：
然後編譯B.less得到的B.css檔案内容如下：
另外，import指令還包含了多種參數類型：
1. @import (reference) "檔案路徑"; 将引入的檔案作為樣式庫使用，是以檔案中樣式不會被直接編譯為css樣式規則。目前樣式檔案通過<code>extend</code>和<code>mixins</code>的方式引用樣式庫的内容。
2. @import (inline) "檔案路徑"; 用于引入與less不相容的css檔案，通過inline配置告知編譯器不對引入的檔案進行編譯處理，直接輸出到最終輸出。
3. @import (less) "檔案路徑"; 預設使用該配置項，表示引入的檔案為less檔案。
4. @import (css) "檔案路徑"; 表示目前操作為CSS中的<code>@import</code>操作。目前檔案會輸出一個樣式檔案，而被引入的檔案自身為一個獨立的樣式檔案
5. @import (once) "檔案路徑"; 預設使用該配置項，表示對同一個資源僅引入一次。
6. @import (multiple) "檔案路徑"; 表示對同一資源可引入多次。
對于上文提到的螢幕變化的時候動态去設定樣式的問題，使用less結合css3的@media就能輕松處理，比如有下面一段less代碼：
界面html如下：
使用這種嵌套的寫法就能實作多個條件的預設樣式，是以最終編譯得到的css如下：
表示目前文檔的寬度小于400的時候，背景色為green；大于400小于800時背景色為red；大約800時背景色為#f938ab。來看看是不是這樣：
這裡隻是一個簡單的測試，實際應用中肯定不可能隻是設定一個簡單的背景色。對于響應式布局的情況，這種寫法非常多。
對于條件判斷，less支援嵌套的寫法，比如：
編譯得到的css如下：
一些基礎的用法暫時先介紹這麼多，更多進階用法還有待研究再發出。由于部落客接觸less文法的時間并不長，如果有了解有誤之處，還望園友們指出。
如果你覺得本文能夠幫助你，可以右邊随意 打賞 部落客，也可以 推薦 進行精神鼓勵。你的支援是部落客繼續堅持的不懈動力。
本文原創出處：http://www.cnblogs.com/landeanfen/
歡迎各位轉載，但是未經作者本人同意，轉載文章之後必須在文章頁面明顯位置給出作者和原文連接配接，否則保留追究法律責任的權利