webstorm配置sass老是报这个
浏览 905回答 1
用koala代替webstorm的watcher吧!koala简单实用不讨厌!多好!
随时随地看视频先安装 [Xcode](http://developer.apple.com/xcode/) 开发工具，它将帮你安装好 Unix 环境需要的开发包
sudo curl -L https://get.rvm.io | bash -s stable
sudo source ~/.rvm/scripts/rvm
2.用rvm安装ruby
sudo rvm install ruby-2.0.0-p648
gem source -r https://rubygems.org/
gem source -a https://ruby.taobao.org
gem sources -l
sudo gem install sass
&3.webstorm下给scss文件添加watch
(1)查看sass的安装路径
which sass
（2）设置webstorm
(3)新建一个scss文件，可以看到对应生成了css
阅读(...) 评论()最近在学习SASS，研究了下编译的方法，现在大家一般用的有两种，一种是直接用命令行编译，另一种就是利用一些方便的编译工具，例如腾讯的koala。后来我发现，原来webstorm早就支持了sass编译& - - 真是贴心啊。。。。
废话不多说，直接去webstorm配置去。
打开settings，可以看到Tools下面有个file watchers选项，点进去如下图
右边显示的就是现在监视的实时编译文件配置，SCSS和SCSS-min就是我配置的。
点击加号，选择SCSS或者SASS(根据自己写的格式，SCSS是最新版的SASS后缀)，我们这里选择是SCSS，进入配置界面
Name和Description就不用多介绍了，Options我们暂时也不用管（其实是我也不懂啥意思。。。）
File type就是我们需要监视的文件类型，这里当然是SCSS
Scope监视范围可以选择不同监视范围，这样就可以设置多个监视配置，输出对应不同的目录或者module下的SCSS文件。
Programe是scss编译工具的目录地址，因为SASS是依赖ruby的，所以我们还需要去安装ruby，ruby在window下的安装文件下载可以在&& && 网站找到，我这里下的193。其他环境的可以去官网下载：
win环境的安装很傻瓜，一路next就行了，不过记得在选择目录的时候，有个add to PATH选项一定要勾上，这样就不用我们手动配置环境变量了。其他环境的没有安装过，百度吧。。。。
安装好ruby以后，打开cmd，输入gem install sass就可以安装SASS了，但是由于gem的默认原地址由于国内伟大的GFW原因可能连接不上导致无法安装，所以我们还需要替换一下。
依次输入：
gem sources &r http://rubygems.org/
gem sources &a http://ruby.taobao.org/
gem sources &l
如果我们看到最后显示的地址只有国内淘宝提供的镜像地址就OK了
然后再输入gem install sass就可以了，完成后输入sass &v 就会返回sass的版本号。
OK以后，在webstorm里面选择本机ruby目录下bin目录里面的scss.bat文件（如果需要编译SASS文件则选择sass.bat）
下面的输出参数，可以根据自己的需要填写，下面列出的是一些常用的参数
--style表示解析后的css是什么格式，如：--style compressed，有四种取值分别为：nested，expanded，compact，compressed.
--sourcemap表示开启sourcemap调试。开启sourcemap调试后，会生成一个后缀名为.css.map文件。 webstorm是默认开启sourcemap的，所以可以不填写
--debug-info表示开启debug信息，升级到3.3.0之后因为sourcemap更高级，这个debug-info就不太用了。
下面是四种格式编译后的样式：
background-color: #000; }
width: 10 }
font-size: 10
font-weight:
text-decoration: }
// expanded
background-color: #000;
font-size: 10
font-weight:
text-decoration:
// compact
#main { color: # background-color: #000; }
#main p { width: 10 }
.huge { font-size: 10 font-weight: text-decoration: }
// compressed
#main{color:#background-color:#000}#main p{width:10em}.huge{font-size:10font-weight:text-decoration:underline}
后面就是输出的目录地址和文件名，目录是相对于源文件的，点击Insert macro可以看到一些变量。默认的话是在源文件下输出CSS文件。
配置完毕后，点击OK就完成了。
然后我们新建个SCSS文件，输入内容就可以看到结果了
可以看到，我输入内容后，直接在源文件下生成了一个css文件和一个map文件。
这样就代表编译成功了，现在就可以开始我们编写我们的SASS项目了，就不用在考虑编译问题了。
阅读(...) 评论()SASS(SCSS)开发环境搭建（webstorm做编辑器）
sass安装：
根据实际操作的过程，总结以下步骤：（限window系统）
1、下载网址：http://rubyinstaller.org/downloads/
（需要Ruby环境）运行安装（只管点击next即可）。
2、回到电脑桌面-&在开始程序中找到Start Command Prompt with Ruby，如下图
点击后出现命令窗口：
命令行中输入：
gem install sass
出现上图中第一个红框中的内容，说明sass安装成功。
不放心可以输入如下命令看下sass的版本号。
如上图中第二个红框中的内容。
至此sass安装成功。
配置webstorm中sass：
在webstorm中settings中搜索file watchers工具，在此工具中添加一个scss的watcher，按照下图设置各项。点击ok
这样webstorm中sass配置好了。(SCSS跟上面一样配置就行了)
建个scss文件试试如下图，写个简单的sass代码
会自动生成对应的css文件。如下图：
电脑上安装的webstorm当生成文件的路径默认的时，会需要手动同步目标文件才能看到最新的修改。（不知道是自己设置的问题还是什么，有了解的伙伴可以多多交流哟）。当然如果是按照默认的路径会在.scss文件下实时产生修改过的.css文件。
ps：项目所在的路径中请不要出现中文，不然sass在编译是会出现编码错误呀。
没有更多推荐了，关于sass，就不想多说什么了。只要你有css基础，十分钟入门好吗。可以参考下资料：http://www.w3cplus.com/sassguide/
今天想说的是webStorm下如何实现sass自动编译。
最近在学习SASS，研究了下编译的方法，现在大家一般用的有两种，一种是直接用命令行编译，另一种就是利用一些方便的编译工具，例如腾讯的koala。后来我发现，原来webstorm早就支持了sass编译& - - 真是贴心啊。。。。
废话不多说，直接去webstorm配置去。
打开settings，可以看到Tools下面有个file watchers选项，点进去如下图
右边显示的就是现在监视的实时编译文件配置，SCSS和SCSS-min就是我配置的。
点击加号，选择SCSS或者SASS(根据自己写的格式，SCSS是最新版的SASS后缀)，我们这里选择是SCSS，进入配置界面
Name和Description就不用多介绍了，Options我们暂时也不用管（其实是我也不懂啥意思。。。）
File type就是我们需要监视的文件类型，这里当然是SCSS
Scope监视范围可以选择不同监视范围，这样就可以设置多个监视配置，输出对应不同的目录或者module下的SCSS文件。
Programe是scss编译工具的目录地址，因为SASS是依赖ruby的，所以我们还需要去安装ruby，ruby在window下的安装文件下载可以在&&&&& 网站找到，我这里下的193。其他环境的可以去官网下载：
win环境的安装很傻瓜，一路next就行了，不过记得在选择目录的时候，有个add to PATH选项一定要勾上，这样就不用我们手动配置环境变量了。其他环境的没有安装过，百度吧。。。。
安装好ruby以后，打开cmd，输入gem install sass就可以安装SASS了，但是由于gem的默认原地址由于国内伟大的GFW原因可能连接不上导致无法安装，所以我们还需要替换一下。
依次输入：
gem sources &r http://rubygems.org/
gem sources &a http://ruby.taobao.org/
gem sources &l
如果我们看到最后显示的地址只有国内淘宝提供的镜像地址就OK了
然后再输入gem install sass就可以了，完成后输入sass &v 就会返回sass的版本号。
OK以后，在webstorm里面选择本机ruby目录下bin目录里面的scss.bat文件（如果需要编译SASS文件则选择sass.bat）
下面的输出参数，可以根据自己的需要填写，下面列出的是一些常用的参数
--style表示解析后的css是什么格式，如：--style&compressed，有四种取值分别为：nested，expanded，compact，compressed.
--sourcemap表示开启sourcemap调试。开启sourcemap调试后，会生成一个后缀名为.css.map文件。 webstorm是默认开启sourcemap的，所以可以不填写
--debug-info表示开启debug信息，升级到3.3.0之后因为sourcemap更高级，这个debug-info就不太用了。
下面是四种格式编译后的样式：
&&color:&#fff;
&&background-color:� }
&&#main p {
&&&&width:&10em; }
&&font-size:&10em;
&&font-weight:&bold;
&&text-decoration:&underline; }
//&expanded
&&color:&#fff;
&&background-color:�
&&width:&10em;
&&font-size:&10em;
&&font-weight:&bold;
&&text-decoration:&underline;
//&compact
#main {&color:&#fff;&background-color:� }
#main p {&width:&10em; }
.huge {&font-size:&10em;&font-weight:&bold;&text-decoration:&underline; }
// compressed
#main{color:#fff;background-color:#000}#main p{width:10em}.huge{font-size:10em;font-weight:bold;text-decoration:underline}
后面就是输出的目录地址和文件名，目录是相对于源文件的，点击Insert macro可以看到一些变量。默认的话是在源文件下输出CSS文件。
配置完毕后，点击OK就完成了。
然后我们新建个SCSS文件，输入内容就可以看到结果了
可以看到，我输入内容后，直接在源文件下生成了一个css文件和一个map文件。
这样就代表编译成功了，现在就可以开始我们编写我们的SASS项目了，就不用在考虑编译问题了。
阅读(...) 评论()}