【工具】sass和less的自动编译

最近试了一下css预编译语言,sass和less,确实是好东西,我也只用了嵌套和变量,函数什么的,觉的用在css中,太复杂,也没必要,如果项目确实需要还好,否则,没必要为了技术而技术。一切都看实际需求,技术只是实现的工具,为了提高开发效率,节省成本,如此而已。

然后就有一个问题,编译。如果每次写完,再手动编译,也太费时费力了,还不如直接写css了,于是,自动编译的需求成为必要,每次一点保存,那边就自动生成新的css代码。经过一翻折腾,我用自己最喜欢的编辑器Hbuider,完美实现了sass和less的自动编译。为了怕以后遗忘,万一换了电脑,又要重新鼓捣一翻,所以,在这里写下实现步骤,方便以后查询。

Hbuilder,我真是太喜欢了,

第一,界面好看,不是黑的,不是白的,是淡淡的粉色,官方说是绿柔色,护眼。光是这个界面,我就再也不想用其他前端ide了,毕竟这是个看脸的世界啊。

第二,不用安装,下载后,解压缩,就能用。

第三,强大的代码提示,这个不用提,代码提示可以说是ide的标配,如果没有强大的提示,那和普通的编辑器有什么区别呢。

第四,就是我今天要说的,可以自动编译sass和less。

好了,下面说正题了,这里只用sass举例吧,因为sass和less非常相似,只是各自的平台不同,自动编译的操作大同小异。

首先,要把sass安装上,sass是基于Ruby的,所以还要先安装Ruby。具体安装步骤请查看官网:

https://www.sass.hk/install/

安装成功后,打开hbuidler,选择工具–预编译器设置,

选择scss,如果没有,就新建一个,然后,点击编辑

标红的三处地方,说明如下:

1、因为sass大多数是用的scss文件,所以这里只写.scss

2、就是sass安装后生成的bat文件

3、为相关命令符,一般这样写:

–no-cache %FileName% ../css/%FileBaseName%.css –style compact

 

像上面那样设置好后,在项目中建两个目录,scss,和css

在scss目录中建.scss文件,编好后,保存,就会自动在css目录中生成.css文件啦。

 

 

 

 

 

 

 

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注