學習完css部分，相信大家對通過css進行DOM元素的樣式操作已經非常熟悉，也可以通過css的語法進行頁面顯示效果的添加和修改。如果你們對css報以崇高敬意，感覺它拯救了你的整個網頁的話，其實你正在犯一個錯誤。
在你熟練使用css進行頁面效果操作的時候，具有編程思維的“CSS預處理”語言正在悄然出現。可以說，它從某種層度上顛覆了原始樣式編寫，並逐漸被各大型網絡公司及前段框架所使用。爲什麼它會有這麼大的魔力，它們都是誰？從這章文檔開始，我給大家介紹一下相關的知識，也就是你們要學習的LESS和SASS。
先來說一下爲什麼會出現LESS、SASS。難道是css不夠優秀了嗎？不是。其實在程序員眼裏，css沒有編程的語言的思維。沒有變量，沒有分支及循環等編程語言最基本的特點，使用css就是在一行一行的在對你的樣式進行描述，寫起來相當費勁，所以開始被程序員嫌棄。很自然的，有人開始爲css加入編程的元素，這被叫做“CSS預處理器”，它的基本思想是：用一種專門的編程語言，進行網頁樣式的設計，然後再通過相關的方法或者是工具編譯成css文件，被項目正常使用。
LESS是一種動態樣式語言，屬於css預處理語言的一種，它使用類似css的語法，爲css賦予了動態語言的特性，如變量、繼承、運算、函數等，更方便css的編寫和維護。並且LESS可以在 多種語言和環境在使用，包括瀏覽器端、桌面應用端、服務器端。
編寫的LESS文件不能被瀏覽器直接使用，需要把LESS文件編譯成css文件。方法很多，最簡單的方法是通過集成工具處理，比較好用的一個工具就是：klola。工具的下載地址爲：http://koala-app.com/index-zh.html。大家可以先去下載並安裝。安裝成功以後運行效果爲：
在講具體語法之前先給大家說一下注釋，相比css，less文件編譯成css文件的時候，有一個特點，通過/**/添加的註釋會被編譯到css文件中，但是通過//添加的註釋則不會。講完註釋，咱們看一下和語法規則相關的部分。
1變量
LESS中允許使用變量，通過變量，可以定義在樣式中頻繁使用的數據。然後在需要使用該數據的的時候直接調用變量名稱即可。LESS中定義變量的語法很簡單：@變量名稱。使用的時候也是在樣式屬性後直接追加變量。示例如下：
2Mixins
Mixins可以實現將一個定義好的樣式類A直接引入到另外一個樣式類B中。從而實現讓樣式類B繼承樣式類A中的所有樣式屬性。定義樣式類的方法和定義一個函數格式類似，並且可以定義形參來接受參數。示例如下：
3LESS運算
LESS中提供了類似運算的算術操作,其中包括加、減、乘、除等。通過運算符，我們可以實現屬性值或者顏色的運算，這樣可以實現屬性值之間的複雜關係。示例如下：
4LESS嵌套
在學習css的過程中，咱們學習了各種跟層級關係相關的選擇器，比如，後代選擇器、子代選擇器、相鄰選擇器、通用兄弟選擇器等等。在LESS裏，不需要去記憶大量的選擇器。因爲，所有的層級關係都可以通過css的嵌套來實現。示例如下：
通過對比LESS的層級和HTML的層級，大家不難發現其中的關係，HTML中的嵌套關係完全可以LESS中模擬。這樣可以省去了編寫css層級選擇器的麻煩。這裏還有一個符號需要給大家說一下，那就是&符號，&表示上一級選擇器。在這段代碼裏，表示給a標籤添加hover僞類。
上面內容給大家介紹了LESS的由來及幾個比較重要的語法。到目前爲止咱們還沒有做LESS的編譯。下一個章節，我會給大家介紹LESS工具編譯，命令行編譯及開發工具編譯配置等多種辦法，幫助你將less文件轉換成css文件。