譯者：wleonardo
我們都知道在大型的專案中，當css有數千行**的時候，css的編寫有一些麻煩。我們經常會出現複製相同的**到不同的地方或者通過我們的編輯器來替換所有相同的顏色。這需要我們費很大的力氣去保持css的可維護性。但是其實我們並不是一定要這樣。
幸運的是，web開發社群已經解決了這個問題。我們現在有了類似less, sass和stylus等的css預處理器。這些工具相比於原始的css給了我們以下的優點：
乙個不好的方面是，一旦你你使用了這些預處理器中的任何乙個，你就必須要編譯你的樣式表為普通的css檔案你才可以讓它在瀏覽器中正常的工作。
如果你已經安裝了node，而且你也知道terminal是什麼，那就開啟乙個而且你也知道terminal是什麼，然後使用npm安裝less：
npm install -g less安裝完畢後你可以在任何乙個terminal中使用
lessc
命令，你可以通過類似下面這個命令來編譯你的.less檔案來輸出乙個css檔案
lessc styles.less > styles.css我們下面所有的樣式都是基於less的，可以將**轉換為類似styles.css的普通的css**。然後在html中加入css檔案。如果你的編譯出現了錯誤，錯誤的相關資訊會展示在你的terminal上面。
less中很重要的乙個特性就是可以像普通的程式語言一樣建立變數。變數可以儲存任何你經常使用的變數：類似顏色，尺寸，選擇器，字型名字，url等等。less的核心就是盡可能的復用你的css**。
這裡，我們定義了兩個變數，乙個用於背景顏色，另乙個用於文字顏色，它們都包含了16進製制的**。你可以切換兩個變數來編譯出不同版本的**：
@background-color: #ffffff;
@text-color: #1a237e;pul
li
p
ulli
在這裡)你可以獲取關於less中變數的更多資訊
less可以幫你把乙個已經存在的class或者id下面所有的樣式應用在其他的選擇器裡面。下面這個例子可以更好的說明：
#circle
#small-circle
#big-circle
#circle
#small-circle
#big-circle
#circle()
#small-circle
#big-circle
#small-circle
#big-circle
mixins還有乙個很酷的特性就是可以接收引數。在下面的例子中，我們在circles新增了乙個引數用於width和height，同時設定預設值為25px。下面會生成乙個寬高為25的#small-circle和乙個寬高為100的#big-circle。
#circle(@size: 25px)
#small-circle
#big-circle
#small-circle
#big-circle
閱讀官方文件了解less mixins的更多資訊
巢狀可以幫助你將html的頁面結構和樣式表的結構相同，同時也可以減少衝突。下面是乙個無序列表(ul)和其子元素的例子:
ul
}
ul
ul li
下面的**在編譯為css的過程中，li會有白色的文字，因為我們在ul中提前定義了text-color變數。
@text-color: #000000;
ul}
ul
ul li
你可以對數字和顏色使用一些簡單的數學計算。如果我們有兩個相鄰的div，第二個的寬度是第乙個的兩倍，同時需要有不同的背景顏色。less內部會知道如何計算單位來保證不出現一團糟的情況。
@div-width: 100px;
@color: #03a9f4;
div#left
#right
div
#left
#right
less還有函式!這是不是越來越想乙個程式語言了？
讓我們來看一看fadeout這個函式，這個函式用來降低顏色的透明度。
@var: #004590;
div}
div
div:hover
上面這段**表示，當滑鼠移動到div上，div的背景色會變成加上一半的透明度，而且相當的簡單。還有很多的其他的有用的函式可以用於操作顏色，檢測的大小，甚至還可以將資源以data-uri形式嵌入到樣式表中。這裡可以檢視到完整的函式列表here.
到這裡你所了解的知識已經可以讓你上手less了！所有的css檔案都是有效的less樣式表，你可以開始優化你的老的，不靈活的css**了。除了上面的那個知識，如果你了解的更多，你會寫出更好的**。下面是我們推薦你們閱讀的文章：
十分鐘入門less
1 變數 使用 可以定義less變數 bule eee 宣告變數 login container 2 混合 混合就是先定義乙個乙個樣式，然後在另外乙個樣式中使用 1 不帶引數 border login container 2 帶引數的混合 帶預設引數的混合 border border width 1...
十分鐘學會Excel匯出
excel匯出在內網系統一般用的很多,一般分為poi和jxl兩種,前者支援excel2003 xls 和excel2007 xlsx 而後者只支援excel2003 xls 所以我們這裡使用poi來做excel 的匯出 我們以匯出員工資訊的資料為例子 第一步 匯入poi的jar包 第二步,在前台寫乙...
教你如何十分鐘入門 Less
我們都知道寫css 是有些枯燥無味的，尤其是面對那些成千上萬行css 的專案。你始終在相同的地方使用相同的規則並且在你的編譯器中搜尋和替換每次顏色的變化。這需要很多的努力和規則來保持你的css可維護，但它本不應該這樣的。很幸運，開發社群已經解決了這個問題，現在我們擁有諸如 less,sass 和 s...