1.less簡介:Less 是一門 CSS 預處理語言,它擴充了 CSS 語言,增加了諸如變量、混合(mixin)、函數等功能,讓 CSS 更易維護、方便制作主題、擴充,Less 可以運行在 Node、瀏覽器和 Rhino 平臺上。這篇文章介紹less運行在瀏覽器平臺上。
2.是否有必要使用less:首先說less是一種提高開發效率的工具,當你界面非常少的時候用不用都影響不大,如果你界面比較多的時候,有公用的組件,樣式,這些的時候使用less來整合嵌套css可以節省不少時間。總的來說:不論項目大小都有必要去嘗試,畢竟喊的這么火,肯定是有它的好處的。
3.首先安裝node環境(因為less需要node環境),在nodejs官網http://nodejs.org/下載對應的node版本安裝,安裝完成之后終端中運行node -v,npm -v命令分別查看,如果出現版本號,就說明node安裝成功,npm是和nodejs一起安裝的node官方的包管理工具,npm是一個匯聚各種前端組件模塊的公共倉庫.類似于java的maven倉庫。
4.node安裝成功之后輸入npm install less -g命令,npm就會自動下載并安裝less,安裝完成less之后,打開webstrom,開始配置webstrom。
5.打開webstrom,找到Preferences→tools→File Watchers,點擊左下角的+號,找到less,less配置如下:
6.配置完成之后,點擊OK,再點擊Apply,點擊OK,完成。現在我們本地搭建好了node環境,可以直接新建demo.less文件,會被自動在當前位置編譯成demo.css文件,我們可以在html文件中引入demo.css文件,這樣比較合適,現在的less是運行在node環境中,當然了,你也可以直接在html文件中引入demo.less文件,這樣html文件中還必須要引入一個less.js,這樣less文件通過less.js文件的解析就運行在瀏覽器環境中了。
7.html直接引入less文件的話需要引入<link rel='stylesheet/less' href='demo.less'>,然后還需要引入<script src='less.js'></script>,less.js可以在less官網下載。
8.建議:less還是用在開發環境中程序員自己擼代碼提高效率比較好,生產環境也就是上線的正式代碼最好不要直接引用less文件和less.js,less還是更適合開發環境,不太適合生產環境(也就是正式代碼),生產環境直接引用less編譯好的css文件就可以。