十分鐘學會less

我們都知道在大型的項目中，當css有數千行代碼的時候，css的編寫有一些麻煩。我們經常會出現複製相同的代碼到不同的地方或者通過我們的編輯器來替換所有相同的顏色。這需要我們費很大的力氣去保持css的可維護性。但是其實我們並不是一定要這樣。

幸運的是，web開發社區已經解決了這個問題。我們現在有了類似,和等的CSS預處理器。這些工具相比於原始的css給了我們以下的優點：

變數，我們可以定義變數來很方便的在你的css中改變值

動態的變數計算。(在css中我們可以使用，但是這個只可以用於長度的單位計算)

Mixins, 可以幫助我們復用和組合css代碼，甚至還支持傳參。

Functions, 提供了一系列使用的工具，用於控制顏色，將圖片轉為data-uris等.

一個不好的方面是，一旦你你使用了這些預處理器中的任何一個，你就必須要編譯你的樣式表為普通的css文件你才可以讓它在瀏覽器中正常的工作。

1. Getting Started

是由JavaScript編寫的，所以需要Node.js或者web瀏覽器來運行。你可以在你的web站點中加入less.js，它會在實時編譯所有的

.less

文件，但是速度比較慢同時也不推薦這麼使用。比較好的辦法是把編譯你的less為css，然後在線上部署普通的css文件。有很多的免費的圖形化軟體可以編譯.less文件，不過在這裡我們會使用node.js。

如果你已經安裝了node，而且你也知道terminal是什麼，那就打開一個而且你也知道terminal是什麼，然後使用NPM安裝less：

安裝完畢後你可以在任何一個terminal中使用

lessc

命令，你可以通過類似下面這個命令來編譯你的.less文件來輸出一個CSS文件

我們下面所有的樣式都是基於less的，可以將代碼轉換為類似

styles.css

的普通的CSS代碼。然後在html中加入css文件。如果你的編譯出現了錯誤，錯誤的相關信息會展示在你的terminal上面。

2. Variables（變數）

Less中很重要的一個特性就是可以像普通的編程語言一樣創建變數。變數可以存儲任何你經常使用的變數：類似顏色，尺寸，選擇器，字體名字，url等等。less的核心就是儘可能的復用你的css代碼。

這裡，我們定義了兩個變數，一個用於背景顏色，另一個用於文字顏色，它們都包含了16進位的代碼。你可以切換兩個變數來編譯出不同版本的代碼：

在上面的例子中，背景顏色是白色，文字是深色的，如果我們想要深色的背景和白色的文字，我們只需要改變變數的值，所有用到這些變數的地方都會被替換。

在http://lesscss.org/features/#variables-feature你可以獲取關於less中變數的更多信息

3. Mixins

LESS可以幫你把一個已經存在的class或者id下面所有的樣式應用在其他的選擇器裡面。下面這個例子可以更好的說明：

你過你不想把你用於mixin輸出在最終的css文件里，你可以加上一個圓括弧：

mixins還有一個很酷的特性就是可以接收參數。在下面的例子中，我們在circles添加了一個參數用於width和height，同時設置默認值為25px。下面會生成一個寬高為25的#small-circle和一個寬高為100的#big-circle。

閱讀官方文檔(http://lesscss.org/features/#mixins-feature)了解Less mixins的更多信息

4. Nesting and Scope(嵌套和作用域)

嵌套可以幫助你將html的頁面結構和樣式表的結構相同，同時也可以減少衝突。下面是一個無序列表(ul)和其子元素的例子:

和在編程語言中一樣，Less中變數的使用也是依賴於作用域。如果一個變數沒有在當前的作用域被定義，那麼LESS會一直向上找，並使用最靠近的聲明的變數。

下面的代碼在編譯為css的過程中，

li

會有白色的文字，因為我們在ul中提前定義了text-color變數。

點擊展開全文

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！