webstorm 怎么添加scss

1、下载ruby最新版2.1.5，安全起见可以安装ruby 1.9.3-p551

ruby安装文件自己百度一下，容易找到。

2、安装过程中，一定注意勾选第二项！否则cmd命令会找不到。

3、安装完后，检查是否安装成功

Win+r快捷键启动cmd命令窗口，输入ruby -v，注意中间空格，显示版本号说明成功。

4、借助ruby安装sass，dos命令窗口输入“gem install sass”

该命令一定要在system32文件下cmd.exe执行，默认安装目录在C:\Windows\System32\cmd.exe文件

5、安装过程中，耐心等待，直到提示安装进度100%。

同样通过“sass -v”命令(中间有空格)检查安装结果，显示当前版本号。

6、接着需要配置webstorm下sass编译环境。

打开webstorm创建空项目，点击“File”菜单选择“Setting”，搜索“watcher”关键字，

7、点击右边绿色加号，选择“SCSS”文件类型。

8、输入监视文件类型名称(随便写)，关键第二个选项，一定要选择ruby安装目录bin文件下的scss.bat文件

9、最后，创建.scss文件输入scss css代码，保存后会生成后缀.css文件，说明环境编译没问题。

1. 任何一个编辑器都需要保存(ctrl + s)，这是所有win平台上编辑类软件的特点，但是webstorm编辑文件右上角是没有那个熟悉的米号的。

换句话说，所有的 *** 作都直接存储，这样带来的坏处就是，没有以前的米号标识，万一键盘误 *** 作也会被立即存储。

省去了ctrl + s之后，在结合Firefox的vim，基本不动鼠标就可以看到结果页面了。

2. 任何一个编辑器只要文件关闭了就没有历史记录了，但是webstorm有。就是说，只要webstorm不关闭，你的文件随时可以返回到之前的 *** 作，webstorm关闭重启后这些历史记录就没有了。这样的坏处也是显然的，由此带来的内存消耗也必然比较大。

3. 任何一个编辑器，除了服务器svn之外，没有本地版本，但是webstorm提供一个本地文件修改历史记录。

4. 与时俱进的眼光。zencoding于2009年出现于it界，在这之后，鲜有工具直接集成到里边。webstorm 2.0之后就集成了。node.js,html5,git,cvs等 就不一一列举了。

5. 提供的插件也是比较齐全，安装非常方便。这样带来了另外的问题，以前的eclipse是安装第三方的，webstorm貌似不能安装第三方的插件。

6. 可以导出当前设置：File ->Export setting 下面就是导入

——————————

打开webstorm,点击file

点击下拉菜单中的settings

点击project/Directories后右边出现了如下：

点击add content root,添加你的项目所在位置

5

选择好按ok确定，在正面会多一个路径

6

点击apply，再点击ok，完成添加

方法/步骤

1

首安装webstorm编辑器，

然后去node的主页下载对应版本的nodejs然后安装下载地址：http://nodejs.org/ 根据自己的系统选择合适的版本下载。

安装完成之后打开命令提示符（win+r）,分别输入node -v以及npm -v如果返回版本号说明你安装成功了

2

接下来就可以安装less了，在“命令提示符”下运行命令“npm install less -g”，然后npm就自动开始下载并安装LESS。

3

配置webstorm（版本10），点击“file”>"settings……" d出设置界面，在左侧导航找到“tool">"file Watchers" 点击“+”号按钮找到less文件选项点击添加。

4

配置less：双击lessd出 设置页面如下图，设置less的工作目录。

例如（--no-color -x $FileName$ --include-path=D:\Project\mobile\assets\css）其他参数请参考http://less.bootcss.com/

---