webstorm中LESS环境的搭建

       LESS是一门CSS预处理器语言，通俗的将，CSS预处理器用一种专门的编程语言，进行web页面样式设计，然后再编译成正常的CSS文件，以供项目使用。CSS预处理器为css增加一些编程的特性，无需考虑浏览器的兼容性问题，例如你可以在CSS中使用变量、简单的逻辑程序、函数等等在编程语言中的一些基本特性，可以让你的CSS更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。目前比较优秀的CSS预处理器语言有SASS、LESS、stylus。 这里呢我介绍一下less的基本用法。        LESS 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。        LESS 可以运行在 Node 或浏览器端。

LESS环境搭建：

两种方式：

       1.LESS是依赖于nodejs环境的，所以首先要安装nodejs，这里可以去官网根据自己电脑的操作系统下载相应的nodejs安装包。

安装less，输入命令 npm intall -g less 当安装后，在cmd命令行中输入 lessc –version 出现版本信息表示安装成功。

Less命令行的使用方式

首先我在桌面上建立了一个lesscodes的文件夹，新建了一个main.less文件，其内容如下：

@mainColor:#e72322; @width:300px; body{ background-color: @mainColor; width: @width; }

在cmd命令行中，先进入到该目录 cd C:\Users\Administrator\Desktop\lesscodes 然后 输出 lessc main.less 编译此文件，编译之后的会在命令行中显示，如图: 但是，希望编译之后的内容能够在文件中显示，怎么做呢？很简单，就是在命令行中 输入 lessc main.less > main.css 后面表示编译后的文件输入到css文件中去，看结果： 会发现多了一个.css文件，打开内容看一下，会发现内容就是上步中，控制台输出的内容。 其实这个过程挺麻烦的，不过我们在webstorm中配置less的开发环境

less在webstorm中的环境配置

1.点击“file”> “settings……” 弹出设置界面，在左侧导航找到“tool”>”file Watchers” 点击“+”号按钮找到less文件选项点击添加。 配置选项如下：

Program: C:\Users\Administrator\AppData\Roaming\npm\lessc.cmd 这里输入的是你安装的less路径 Arguments:--no-color $FileName$ 默认的的 Working directory:$FileDir$ Output paths to refresh: $FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map 确认输入无误后点右下的“OK”按钮。然后再点Settings 版右下的“Apply”应用按钮。 2.点击“file”–> “settings –> External Tools 点击less 配置如下： Programe：C:\Program Files\nodejs\node.exe你的nodejs的安装路径 Parameter

C:\Users\Administrator\AppData\Roaming\npm\node_modules\less\bin\lessc$FilePath$ $FileDir$\$FileNameWithoutExtension$.css

working directory：自动生成的

这样就完成了less在webstorm中的配置。 测试 test.less代码：

@mainColor:#e92322; @width:300px; @height:300px; div{ background-color: @mainColor; width: @width; height: @height; }

自动生成的test.css代码

div { background-color: #e92322; width: 300px; height: 300px; }

具体less语法，稍后分享！