首先Sass是一门CSS预处理语言，它扩展了CSS，有助于减少重复，节省时间。

Sass运行环境的搭建

Sass是ruby语言编写的，但是两者之间没有什么语法关系，即使不会ruby，依然可以正常使用Sass，我们需要先安装ruby，再安装Sass。

首先安装ruby，如果你使用的是ISO系统，那么你的系统已经安装好ruby了，如果你使用的是微软的Windows系统，那么就需要我们自行安装ruby。

安装Ruby

步骤（1）:打开链接https://www.ruby-lang.org/en/downloads/，您将看到如示屏幕:

步骤（2）:接下来，运行安装程序在系统上安装Ruby。

随便选择一个安装。当然要根据你的系统位数选择！

步骤（3）:打开安装包，出现如下图，点击OK

步骤（4）:我们最好选择第一个选项 ( I accept the License ) 点击next

安装完成后如下图：

步骤（5）:安装完成后检查一下是否安装成功

window+R 敲入cmd

敲入ruby -v，安装成成功后出现下图：

步骤（6）:接下来，将Ruby bin文件夹添加到您的PATH用户变量和系统变量以使用gem命令。

路径用户变量:

右键点击我的电脑。

选择属性。

接下来，选择高级标签，然后点击环境变量。

在环境变量窗口下，双击 PATH ，如屏幕所示。

您将得到一个编辑用户变量框，如图所示。在变量值字段中将ruby bin文件夹路径添加为 C:\\ Ruby \\ bin 。如果路径已经为其他文件设置，则在其后放置分号，并添加Ruby文件夹路径，如下所示。

点击确定按钮。

系统变量:

点击新建按钮。

接下来，会显示新系统变量块，如下所示。

在变量值字段中输入 RubyOpt ，并在变量值字段中输入 rubygems 。写入变量名称和值后，单击确定按钮。

Sass的安装

ruby安装包中集成了gem包管理工具，类似于nodejs下的npm，因此我们不需再下载gem，直接打开命令行来使用gem

sass安装：有两种方法，官方安装和通过镜像安装

1）官方安装：ruby安装好后，它自带的包管理工具gem也就安装好了。直接打开命令行通过gem执行sass安装命令，再查看是否安装成功：

gem install sass

Sass -v

2）通过镜像安装：比官方安装方法多了2步：需要先移除默认的源，再添加ruby china源，查看安装成功之后，最后在执行官方的安装方法。

gem sources --remove https://rubygems.org（取消默认的绑定源）

gem sources --a https://gems.ruby-china.org（绑定国内网站）

gem sources -l （验证换源是否成功）

gem install sass

Sass -v

注：gem改源：放在rubygem.org上的资源文件位于国外站点，由于某些原因，在国内访问可能会出现连接失败等问题，所以我们先把gem的连接源改到国内的一些镜像资源上

1 gem sources --remove https://rubygems.org（取消默认的绑定源）

2 gem sources --a https://gems.ruby-china.org（绑定国内网站）

3 gem sources -l（验证换源是否成功）

Sass的编译

Sass编译方法：sass编译方式大概有三种通过命令行编译（基础方法）、GUI可视化图形同居编译及自动化编译

1）命令行编译：就是在命令行中通过sass的命令设置及编译

①单文件转换命令：

sass sass.scss sass.css

#把名为sass的Sass文件转化为CSS文件，每次更新保存会都要执行这个命令

②单文件监听命令（添加--watch 命令）：

sass --watch sass.scss：sass.css

#‘--watch’参数加上之后，可以监测style这个文件的变化，更新保存之后自动编译

③多文件（文件夹）监听命令（添加--watch 命令）：

sass --watch sass/main:dist/css

#监视sass目录下main文件夹中的所有sass文件，并自动编译为css文件之后，放到dist/css目录下

④逆向操作：css文件转换为sass/scss文件

sass-convert style.css style.sass

sass-convert style.css style.scss

2）GUI编译工具

推荐Koala工具

3）自动化编译

可以使用webstorm、sublime等编辑器的相关插件实现，也可以借助Gulp等自动化构建工具来配置。这里推荐两款sublime的插件：Sass(Sass语法高亮)和Sass Bulid(编译)插件的使用也很简单，编辑完文件后默认快捷键Ctrl + B即可编译，会在当前目录下生成同名css及css.map文件