吴劲韬

null

null

Less的安装与配置

Less的安装与配置

Less与Sass

先说一段题外话,很多初学者在选择CSS 预处理语言不免会感到犹豫,作为CSS 的两大预处理语言LessSass,各自都有着很广泛的使用群体,我究竟该选哪个好呢?

经过了几个项目的使用和对比,我最终还是选择了Less。对我来说,我只想安安静静地写写CSS,虽然Sass结合Compass为我提供了循环、逻辑判断语句以及大量的函数(Mixin),但到了实际的项目中,这些“花哨”的功能真就没用过几次。试想一下要你调一个按钮:active时的颜色,你是直接通过Chrome审查元素去调,还是用lightendesaturate这些颜色操作函数一次一次地去试。实战中用的最多的也就只有CSS选择器的嵌套,与继承,而这些Less也都为我提供了,使用起来也比Sass更方便。

Less的安装与配置

1.通过koala

如果你是一个“高手”,酷爱记事本,那么koala一定很适合你。koala是一个前端预处理器语言图形编译工具,支持LessSass、Compass、CoffeeScript,帮助web开发者更高效地使用它们进行开发。跨平台运行,完美兼容windows、linux、mac。

koala

使用的时候直接将文件夹拖拽到Koala界面,即可添加项目。如项目目录下有新增文件,点击文件列表上方的刷新按钮,将自动添加新文件。编辑完成保存后Koala就会为你自动编译

2.使用WebStorm集成开发环境

WebStorm的配置过程稍微有点复杂。

1.安装Node.JS

由于Less是使用JS开发的,所以Less运行时依赖Node.JS,如果你电脑之前没有安装过Node.JS,还需下载安装Node.JS

node.js官网

安装过程都是一路下一步。安装完成后打开控制台输入node -v,如果能显示出版本号就说明,安装成功了。

2.替换淘宝镜像 CNPM

由于长城牌防火墙的原因,可能NPM(Node.js的包管理工具)无法访问到服务器,这时就可替换成淘宝的NPM镜像

打开控制台直接输入:
npm install -g cnpm --registry=https://registry.npm.taobao.org
MAC平台前面还需加一个sodo

3.安装Less

打开控制台直接输入:
cnpm install -g less
接着输入lessc -v能看到版本号就表示安装成功了

4.添加File Watchers

打开WebStorm,点击文件—>设置—>File Watchers—>右边的+

Less配置

program:你Node安装路径下的lessc.cmd
arguments:--no-color --source-map=$FileNameWithoutExtension$.css.map $FileName$ 
working directory:$FileDir$
output paths to refresh:$FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map

之后你只要在项目中添加一个.less文件,系统就会自动为你编译了。

3.配置Autoprefixer

以前用Sass,一个最主要的原因就是烦人的CSS厂商前缀,有了Autoprefixer你就再也不用为这些琐事而发愁了。

Autoprefixer是一个后处理程序,不象Sass以及Stylus之类的预处理器。它适用于普通的CSS,可以实现css3代码自动补全。也可以轻松跟Sass,LESS及Stylus集成,在CSS编译前或编译后运行。详情见,https://github.com/postcss/autoprefixer

当Autoprefixer添加前缀到你的CSS,还不会忘记修复语法差异。这种方式,CSS是基于最新W3C规范产生

1.安装Autoprefixer

打开控制台直接输入:
cnpm install autoprefixer -g
安装完后接着输入:
cnpm install postcss-cli -g

2.配置External Tools

打开Webstorm 文件 -> 设置 -> 外部工具 点击新增按钮,如图:

添加Autoprefixer

填写具体配置,例如我的配置,如图:

Autoprefixer配置信息

Program:填入你的postcss.cmd 的PATH;(一般在node安装目录下)
Parameters: -u autoprefixer -o $FileDir$/$FileName$ $FileDir$/$FileName$ 
Working directory :$ProjectFileDir$

配置好后,你可以在css,或less文件中右击,就可以在右键菜单中看到External Tools – Autoprefixer。

posted @ 2016-02-19 15:25  吴劲韬  阅读(6042)  评论(1编辑  收藏