寫在前面:
我們都知道寫 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 文件編譯為 css 文件!切記切記!
4.less的編譯
因為LESS是無法在瀏覽器中直接進行執行的,所以我們要進行一個編譯,將xx.less文件編譯為xx.css文件.但是官方只提供了命令行的編譯方式,這個就不是很好了.不是很直觀,命令行的一個編譯代碼就是:
lessc xx.less > yy.css
xx.less是我們寫的less文件,yy.css是編譯之后生成的目標文件.
所以!!!這里我們的國人就給大家寫了一個less的編譯工具.就是koala.她是一個可視化的編譯工具.下載和安裝都是很簡單的.見下面的圖示:
使用"考拉"來編譯 CSS文件還是很簡單的,沒有啥子問題.直接拖進去.然后編譯就可以了.
寫在最后:
當我們考慮用less來寫 CSS的時候,編譯完畢之后,當我們修改LESS文件的時候css文件也會發生改變.而且以后我們如果要修改樣式的時候.這個時候我們就要修改 less文件了,而不是修改css文件!切記切記!
當我們在修改less的值的時候, css文件中的代碼也會進行一個響應的改變.
