在webstorm下使用compass 和 sass

一直想玩sass，但发现这玩意彷佛在linux下使用的，而我这样的只是侧重前端的人玩linux作啥，最好是所见即所得，省时间精力！后来百度了下网上，几乎不少方法都是错的，后来经过这些方法的启发，居然研究成功了，因此写下方法备注一下。

以前为了进阶css，狠抓了一下sass（如今叫scss，编程风格和css相似）和它的框架compass，因为本人对命令行的恐惧，所以总想将其弄到IDE中。

先安装ruby，sass，compass。

先在这里下载ruby 我下载的是最新版的ruby

Ruby安装包下载地址：http://rubyinstaller.org/downloads/下载对应系统版本的安装包；

二、双击rubyinstaller-2.2.3-x64.exe开始安装，以下图所示安装;

三、检查是否安装成功win+r输入cmd回车打开终端输入ruby -v；

Gem的使用方法

安装完Ruby实际上已经安装好了gem，经过win+r输入cmd回车打开终端。

查看已经安装的gem软件

 

gem list

下面安装sass

gem install sass

 

按回车键确认，等待一段时间就会提示你sass安装成功。最近由于墙的比较厉害，若是你没有安装成功，那么请参考下面的淘宝的RubyGems镜像安装sass，若是成功则忽略。

若是要安装beta版本的，能够在命令行中输入

gem install sass --pre

你还能够从sass的Git repository来安装，git的命令行为

git clone git://github.com/nex3/sass.git
cd sass
rake install

升级sass版本的命令行为

gem update sass

查看sass版本的命令行为

sass -v

你也能够运行帮助命令行来查看你须要的命令

sass -h

淘宝RubyGems镜像安装 sass

因为国内网络缘由（你懂的），致使 rubygems.org 存放在 Amazon S3 上面的资源文件间歇性链接失败。这时候咱们能够经过gem sources命令来配置源，先移除默认的https://rubygems.org源，而后添加淘宝的源https://ruby.taobao.org/，而后查看下当前使用的源是哪一个，若是是淘宝的，则表示能够输入sass安装命令gem install sass了，关于经常使用gem source命令可参看：经常使用的gem source

$ gem sources --remove https://rubygems.org/
$ gem sources -a https://ruby.taobao.org/ 【若是你系统不支持https，请将淘宝源更换成：gem sources -a http://gems.ruby-china.org】
$ gem sources -l
*** CURRENT SOURCES ***

https://ruby.taobao.org
# 请确保只有 ruby.taobao.org
$ gem install sass

 安装compass

gem install compass

Compass使用方法

一、建立项目 首先经过命令行进入你要建立项目的文件夹。cd\回到根目录 cd ** 进入某个文件夹。

 

compass create myproject

 

二、配置config.rg 主要是对压缩比例。

#压缩比例output_style = (environment == :development) ? :expanded : :compresse

 

三、实时编译sass Compass实时监控Sass目录的文件变化，只要保存文件当即将对应文件编译成css文件

 

compass watch

webstrom2016设置

可能有人会问为啥装的是sass，而下面选择的倒是scss呢，这是由于

SCSS是最新版的SASS后缀

.启动WebStorm，打开已有项目，建立一个scss文件。

    这是在右上角会显示Add Watcher按钮，点击它，在弹出的对话框中，将Program的路径设为Ruby中scss.bat的路径。

也能够修改css的输出路径等等。

另外也能够设置全局的监听

• 若是你想用SCSS，而且Ruby是安装在默认路径下，那么”File Type:“和”Program：“那里的设置就和我同样；

• 若是是用SASS，那么你在新建时应该选择SASS的类型，”Program：“也应该选”sass.bat“。

 

    主要步骤已经完成，如今在咱们修改scss文件的时候，webstorm会为咱们自动生成对应的css文件，别忘记在html中引入这个css文件。

 

    测试修改ionic的主题颜色，在以前建立的scss文件中添加如下内容并运行。

1. $positive: #00FF00;  
2.   
3. @import "../lib/ionic/scss/ionic";  

 

    就会发现以前使用蓝色positive的内容所有变成了绿色。

上面设置好后，在scss文件中随便写点东西看能生成不，对了，它但是自动生成css文件哦。

固然正确写完后，里面还有一个map文件

能够参考这里http://www.sass.hk/install-sass.html