我们先说下less吧,less就是一个变异版本的CSS,但是less却给我们编写css减少了很多麻烦,通过手写less,编译成css是非常方便的。
如果你习惯使用的开发工具是Dreamweaver,那么建议你直接使用国人开发的koala less编译工具进行编译。如果你习惯使用webstrom和sublime工具,就可以使用node.js进行配置相关的less编译环境。下面主要说webstrom下的less编译环境的配置。
首先,你得安装node.js安装好了以后,直接在命令行运行以下命令
npm install less -g
即可安装less编译环境。
下面就是配置webstrom了。
点击file->setting->tools->file watchers,然后点击右边的“+”号,进行添加less,如图:

弹出如下图所示,webstrom会自动寻找到less环境安装的目录,因此只需要点击OK即可完成配置。

赶快创建一个less文件来测试下,是否编译成功,创建文件代码如下:
@w:300px;
@h:200px;
@c:#F2F2F2;
@bg:red;
.main{
width: @w;
height:@h;
background: @bg;
&:hover{
color: @c;
}
}
会自动编译成一个css文件,其内容为:
.main {
width: 300px;
height: 200px;
background: red;
}
.main:hover {
color: #F2F2F2;
}
是不是很简单?,实例代码如下图所示:
