寫 css 有多種方式，最簡單的做法是打開記事本，一行一行的直接手寫。嗯，我就這么寫了好多年。當(dāng)然編輯器不一定用記事本，可以用 notpad++ 或 vim、或 dreamweaver、或其他……
什么是 less ?
如果你寫的 css 足夠多，就會發(fā)現(xiàn)有些地方是重復(fù)的。比如你希望頁面頭部寬度 width 是960px，中間也是 960px，頁腳也是 960px，你知道它們是一樣的，但不得不重復(fù)……如果你是程序員，肯定希望在 css 的語法中，要是有一個變量該多好！比如，我定義一個寬度的變量 @width:960px，然后在所有需要設(shè)置頁面寬度的地方，都填上 @width，既省了時間，也避免了錯誤，還方便以后一次修改，全部生效。
less 就是這樣一個 css 的增強(qiáng)語法系統(tǒng)。其實(shí)所有語法加起來，應(yīng)該挺簡單的，前提是你熟悉 css。如果你對 css 很陌生，那還是先熟悉 css 再說。
less 的官方網(wǎng)址是：http://lesscss.org，但好像要翻墻才能訪問。但非常幸運(yùn)，還有一個翻譯成中文的網(wǎng)站：http://www.lesscss.net， 內(nèi)容基本一樣（我們這里不感謝黨，也不感謝領(lǐng)導(dǎo)，而是感謝做這個網(wǎng)站的朋友）。這個網(wǎng)站就一個頁面，一個很長很長的頁面，你從頭往下看，看完了，也就學(xué)完了。
現(xiàn)在，請?jiān)试S我假設(shè)，你花10分鐘大致看完 less 語法。所以，這篇文章將不再討論如何寫 less 的話題，而是其他事情——
當(dāng)你用 less 這種增強(qiáng)型的語法寫完 css 之后，需要將一堆變量轉(zhuǎn)成實(shí)際的 css 代碼，因?yàn)闉g覽器并不支持 less（要是瀏覽器能夠默認(rèn)支持該多好！）。這種將 less 代碼轉(zhuǎn)成 css 的過程，我們叫做“編譯”。編譯工具很多，下面我們談在 windows 下最簡單的做法（我嘗試了很多種工具，下面這種是最簡單的）。
使用 WinLess 編譯
1、到 http://winless.org 下載工具 WinLess，然后點(diǎn)擊安裝。
2、建立一個文件夾，比如 MyLessTest，并在其中建立子文件夾 less 和 css
MyLessTest
--less
--css
3、打開 WinLess，如下圖，點(diǎn)擊 Add folder 按鈕，將剛才建立的 MyLessTest 添加進(jìn)去（注意：不是添加 less 文件夾，而是它的上層目錄 MyLessTest，方便將結(jié)果輸出到 less 的同級目錄 css）
4、WinLess 右側(cè)會出現(xiàn)所有的 less 文件（如果沒有出現(xiàn)，請點(diǎn)擊“Refresh”按鈕進(jìn)行刷新），以及輸出的路徑(output file)。
5、選中需要編譯的文件，比如 “bootstrap.less”（注意：請不要全選，在這里，其他一些文件只是被 bootstrap.less 引用而已），點(diǎn)擊 “Compile” 按鈕開始編譯。然后，請打開 less 的同級目錄 css 查看結(jié)果。
到此為止，編譯過程全部完成。
題外話：為什么使用 less ？因?yàn)槲覀冊?wojilu 框架中使用了 bootstrap 這個UI框架，而 bootstrap 的 css 是使用 less 寫的。所以，學(xué)習(xí) less 就成了必須的任務(wù)。
在線編譯
因?yàn)?less 的語法畢竟相對簡單，所以一些在線工具可以很輕松的做到。比如 http://less.cnodejs.net http://www.ostools.net/less 一般都有兩個框，左側(cè)輸入less，右側(cè)呈現(xiàn)編譯的 css，方便在線學(xué)習(xí)和測試。
修改 bootstrap 中的 less
如下圖，入口文件是 bootstrap.less 和 responsive.less 文件——
這個入口文件 bootstrap.less 是這樣引用其他 less 文件的：
了解這份 less 的內(nèi)容很有必要。通過這個入口文件，逐步了解 bootstrap 的全部內(nèi)容，才能更加方便的自定義它。
比如，如果要修改每欄 column 的寬度，可以打開 variables.less ，修改其中的 @gridColumnWidth 變量的值。