windows下搭建Ruby+Sass环境

工具


我的操作系统是windows8、64位操作系统。

下载Ruby

从ruby官网下载RubyInstallers地址是：http://rubyinstaller.org/downloads/
根据操作系统，选择相应的安装包，在此选择Ruby 2.2.2 (x64)

安装Ruby

1.一路点击next,完成安装，其中在这一步，要对第二项打勾。否则就算再之后配置了环境变量，有可能会发现，再重新开机，当你在命令行输入ruby -v,命令行会提示你这不是一个命令，解决办法就是再到环境变量处，对当时设置的环境变量再点击确定，再打开命令行，就可以成功运行ruby -v了。但是当每次开机后，都需要这样重复做才可以。
这里写图片描述
2.配置环境变量：
一个RUBY_HOME
RUBY_HOME:D:\ruby\Ruby22-x64
以当前安装的ruby目录为主
这里写图片描述
在path里面后面添加 %RUBY_HOME%\bin;
3.查看是否安装成功
打开cdm命令行面板，输入gem -v ，如果显示出了版本号，则说明安装成功。

安装sass

  1. 当Ruby安装完成后，win+r+cmd,打开命令面板
  2. 输入 gem install sass,安装sass
    3.在安装过程中 可能会遇到报错：
    这里写图片描述
    解决方法：
    在命令行内输入以下命令：
$ gem sources --remove https://rubygems.org/
$ gem sources -a https://ruby.taobao.org/
$ gem sources -l
*** CURRENT SOURCES ***

https://ruby.taobao.org
# 请确保只有 ruby.taobao.org

这里写图片描述
再次输入命令gem install sass,就可以安装成功。
这里写图片描述

相关安装链接：

编写sass文件步骤：

1.编写好一个sass文件

$myColor: #ccc;

#page{ color:$myColor; }

2.保存完文件后，找到sass文件的目录，在命令行内输入
sass demo1.scss demo1.css
3.之后就会在与demo1.scss同目录下生成demo1.css文件，最后文件内会有
demo1.scss、demo1.css、demo1.css.map、.sass-cache文件。
4.打开demo1.css就可以看到编译之后的结果了。

#page { color: #ccc; }

/*# sourceMappingURL=demo1.css.map */

这里写图片描述

编译

1.单文件转换命令
sass demo1.scss demo1.css
2.对单文件进行监听，如果之前的文件有改变，那么此次编译就会在上次的基础上做改动。
sass –watch style.scss:style.css
这里写图片描述