1.Less學習筆記第一篇

寫在前面:

我們都知道寫 CSS 是一個蠻痛苦的過程,而且很機械.俗話說的好:哪裡有需求,那裡就會有東西出來.

呃....這話說的真拗口.

反正知道 less 是一個很牛逼的東西就可以了.他為 CSS 帶來了"預編譯"這樣的一個概念.讓寫 CSS 不在枯燥乏味,好了,廢話不多說.直接上菜,開更:

1.less的基本概念

        1.1 Less的介紹

        1.2less的安裝

        1.3less的應用

2.less 的一個概念

      這裡有less 的一箇中文網站:

      http://less.bootcss.com/#

      這裡補充一點less的知識:

    less是CSS的預處理機制.看下面的一個圖示解釋:

簡單的一個介紹

   使用 less開發的檔案的字尾是一個.less的檔案,經過編譯之後就會變成一個CSS檔案.

    使用 less可以讓我們使用更少的程式碼來做更多的事情.

3.less的安裝

檔案我已經下載在了桌面上面.其實就是less.js檔案而已.如下圖所示:

本地 less 檔案

那麼如何去使用這個東西呢?看下面的一個檔案所示:

用法

注意:

雖然瀏覽器可以編譯 less 檔案,但是很消耗效能.所以一般我們在本地將 less 檔案編譯為 css 檔案!切記切記!

4.less的編譯

因為LESS是無法在瀏覽器中直接進行執行的,所以我們要進行一個編譯,將xx.less檔案編譯為xx.css檔案.但是官方只提供了命令列的編譯方式,這個就不是很好了.不是很直觀,命令列的一個編譯程式碼就是:

lessc xx.less > yy.css

xx.less是我們寫的less檔案,yy.css是編譯之後生成的目標檔案.

所以!!!這裡我們的國人就給大家寫了一個less的編譯工具.就是koala.她是一個視覺化的編譯工具.下載和安裝都是很簡單的.見下面的圖示:

koala 編譯器

使用"考拉"來編譯 CSS檔案還是很簡單的,沒有啥子問題.直接拖進去.然後編譯就可以了.

寫在最後:

當我們考慮用less來寫 CSS的時候,編譯完畢之後,當我們修改LESS檔案的時候css檔案也會發生改變.而且以後我們如果要修改樣式的時候.這個時候我們就要修改 less檔案了,而不是修改css檔案!切記切記!

當我們在修改less的值的時候, css檔案中的程式碼也會進行一個響應的改變.