寫 css 有多種方式，最簡單的做法是打開記事本，一行一行的直接手寫。嗯，我就這么寫了好多年。當然編輯器不一定用記事本，可以用 notpad++ 或 vim、或 dreamweaver、或其他……

什么是 less ?

如果你寫的 css 足夠多，就會發現有些地方是重復的。比如你希望頁面頭部寬度 width 是960px，中間也是 960px，頁腳也是 960px，你知道它們是一樣的，但不得不重復……如果你是程序員，肯定希望在 css 的語法中，要是有一個變量該多好！比如，我定義一個寬度的變量 @width:960px，然后在所有需要設置頁面寬度的地方，都填上 @width，既省了時間，也避免了錯誤，還方便以后一次修改，全部生效。

less 就是這樣一個 css 的增強語法系統。其實所有語法加起來，應該挺簡單的，前提是你熟悉 css。如果你對 css 很陌生，那還是先熟悉 css 再說。

less 的官方網址是：http://lesscss.org，但好像要翻墻才能訪問。但非常幸運，還有一個翻譯成中文的網站：http://www.lesscss.net， 內容基本一樣（我們這里不感謝黨，也不感謝領導，而是感謝做這個網站的朋友）。這個網站就一個頁面，一個很長很長的頁面，你從頭往下看，看完了，也就學完了。

現在，請允許我假設，你花10分鐘大致看完 less 語法。所以，這篇文章將不再討論如何寫 less 的話題，而是其他事情——

當你用 less 這種增強型的語法寫完 css 之后，需要將一堆變量轉成實際的 css 代碼，因為瀏覽器并不支持 less（要是瀏覽器能夠默認支持該多好！）。這種將 less 代碼轉成 css 的過程，我們叫做“編譯”。編譯工具很多，下面我們談在 windows 下最簡單的做法（我嘗試了很多種工具，下面這種是最簡單的）。

使用 WinLess 編譯

1、到 http://winless.org 下載工具 WinLess，然后點擊安裝。

2、建立一個文件夾，比如 MyLessTest，并在其中建立子文件夾 less 和 css

    MyLessTest
        --less
        --css

3、打開 WinLess，如下圖，點擊 Add folder 按鈕，將剛才建立的 MyLessTest 添加進去（注意：不是添加 less 文件夾，而是它的上層目錄 MyLessTest，方便將結果輸出到 less 的同級目錄 css）

4、WinLess 右側會出現所有的 less 文件（如果沒有出現，請點擊“Refresh”按鈕進行刷新），以及輸出的路徑(output file)。

5、選中需要編譯的文件，比如 “bootstrap.less”（注意：請不要全選，在這里，其他一些文件只是被 bootstrap.less 引用而已），點擊 “Compile” 按鈕開始編譯。然后，請打開 less 的同級目錄 css 查看結果。

到此為止，編譯過程全部完成。

題外話：為什么使用 less ？因為我們在 wojilu 框架中使用了 bootstrap 這個UI框架，而 bootstrap 的 css 是使用 less 寫的。所以，學習 less 就成了必須的任務。

在線編譯

因為 less 的語法畢竟相對簡單，所以一些在線工具可以很輕松的做到。比如 http://less.cnodejs.net http://www.ostools.net/less  一般都有兩個框，左側輸入less，右側呈現編譯的 css，方便在線學習和測試。

修改 bootstrap 中的 less

如下圖，入口文件是 bootstrap.less 和 responsive.less 文件——

這個入口文件 bootstrap.less 是這樣引用其他 less 文件的：

了解這份 less 的內容很有必要。通過這個入口文件，逐步了解 bootstrap 的全部內容，才能更加方便的自定義它。

比如，如果要修改每欄 column 的寬度，可以打開 variables.less ，修改其中的 @gridColumnWidth 變量的值。