LESS IS MORE

學習完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文件。