介紹編譯的less的兩種IDE工具

介紹編譯的less的兩種IDE工具

現在css預編譯越來越普及了,著名的有less、sass、stylus等等等等。功能上基本上都是大同小異。這些個玩意兒主要表達的意思就是:“像編程一樣的編寫你的css”。

我在羣裏面看到好多的網友都是用koala這個工具編譯less,這個工具我也用過,但是我覺得他很麻煩。

 

下面我介紹兩個IDE工具,它們都能解析less,關鍵是不用那麼麻煩,廢話不多說,下面開始介紹:

 

第一種:webstorm (強大前端開發IDE)

我在前面的博文介紹過webstorm 安裝less解析成css的文章。

點擊這裏:webstorm9.3 安裝less 編譯css教程

本文就不在介紹了。

 

 

第二種:HBuilder  (自帶less編譯插件)

今天主要介紹這款工具的,

首先,你得下載這個工具,下載地址:http://www.dcloud.io/

 

下載完成後,打開軟件。

wps3F47.tmp

 

 

選擇,“工具” -> “插件安裝”

wps3F58.tmp

 

找到“less sass編譯插件”,如果默認沒有安裝 ,就點擊安裝,安裝過的直接使用就可以了,安裝都免了

wps3F59.tmp

 

好了,到這裏基本上安裝這一步就完成了,下面介紹如何使用HBulider編譯less?

 

首先新建項目web項目。

文件 -> 新建 -> web項目

wps3F5A.tmp

 

新建完成如下:

wps3F5B.tmp

 

在css文件夾下面新建style.less文件

wps3F5C.tmp

 

“ctrl + s”保存,會在同級文件下面生成style.css文件

wps3F5D.tmp

 

打開style.css文件,如下:

wps3F5E.tmp

 

好了,搞定了,直接引用解析的css就可以了

 

gif操作展示:

less

本教程到這裏就結束了。so easy 吧(*^__^*)


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章