CoffeeScriptLess的设置与布局

1.安装Node.JS

鉴于Less是利用JS开发的,所以Less运行时看重Node.JS,若是您电脑往日并未设置过Node.JS,还需下载安装Node.JS

node.js官网

设置进程都是一道下一步。安装到位后打开控制台输入node
-v,若是能显得出版本号就证实,安装成功了。

Less的装置与配置

2.替换天猫镜像 CNPM

鉴于长城牌防火墙的来头,可能NPM(Node.js的包管理工具)不能访问到服务器,那时就可替换成淘宝的NPM镜像

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

1.安装Autoprefixer

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

3.安装Less

开拓控制台直接输入:
cnpm install -g less
紧接着输入lessc -v能收看版本号就意味着安装成功了

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。

4.添加File Watchers

打开WebStorm,点击文件—>设置—>File
沃特chers—>右侧的+

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文件,系统就会自行为您编译了。

1.通过koala

如若您是一个“高手”,青眼记事本,那么koala毫无疑问很吻合您。koala是一个前端预处理器语言图形编译工具,匡助Less、Sass、Compass、CoffeeScript,辅助web开发者更高速地利用它们举办付出。跨平台运行,完美包容windows、linux、mac。

koala

选取的时候从来将文件夹拖拽到Koala界面,即可添加项目。如项目目录下有新增文件,点击文件列表上方的基础代谢按钮,将机关添加新文件。编辑达成保存后Koala就会为您活动编译。

2.利用WebStorm集成开发条件

WebStorm的布署进程稍微有点复杂。

Less与Sass

先说一段题外话,很多初学者在甄选CSS 预处理语言不免会感觉到犹豫,作为CSS
的两大预处理语言Less与Sass,各自都有着很广泛的应用群体,我到底该选哪个好吧?

通过了多少个类其他应用和对照,我最终依然接纳了Less。对自家来说,我只想安安静静地写写CSS,就算Sass结合Compass为本人提供了巡回、逻辑判断语句以及大批量的函数(Mixin),但到了实际的档次中,那些“花哨”的效应真就没用过五次。试想一下要你调一个按钮:active时的颜料,你是直接通过Chrome的审核元素去调,依旧用lighten、desaturate那些颜色操作函数几次一次地去试。实战中用的最多的也就只有CSS拔取器的嵌套,与继承,而那个Less也都为自身提供了,使用起来也比Sass更有益于。

Less的装置与配置

3.配置Autoprefixer

先前用Sass,一个最重点的原因就是讨厌的CSS厂商前缀,有了Autoprefixer你就再也不用为这几个枝节而犯愁了。

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

当Autoprefixer添加前缀到你的CSS,还不会遗忘修复语法出入。那种办法,CSS是按照最新W3C规范暴发