Sass和Compass的安装介绍

PS: 本文操作均在Windows下

Sass

Sass 是采用 Ruby 语言编写的一款 CSS 预处理语言，它诞生于2007年 Sass 是一门高于 CSS 的元语言，它能用来清晰地、结构化地描述文件样式，有着比普通 CSS 更加强大的功能。Sass 能够提供更简洁、更优雅的语法，同时提供多种功能来创建可维护和管理的样式表。

Sass和Scss的关系

Sass 和 Scss 其实是同一种东西，我们平时都称之为 Sass，两者之间不同之处有以下两点：

1. 文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名
2. 语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)，而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。

Sass/Scss和纯 CSS 写法

1. Sass 和 CSS 写法有差别：
   Sass 和 CSS 写法的确存在一定的差异，由于 Sass 是基于 Ruby 写出来，所以其延续了 Ruby 的书写规范。在书写 Sass 时不带有大括号和分号，其主要是依靠严格的缩进方式来控制的。如：
   Sass写法：

body color: #fff background: #f36
而在 CSS 我们是这样书写：
body**{** color:#fff; background:#f36;**}**

2. SCSS 和 CSS 写法无差别：
   SCSS 和 CSS 写法无差别，这也是 Sass 后来越来越受大众喜欢原因之一。简单点说，把你现有的“.css”文件直接修改成“.scss”即可使用。

Sass当中的注释

sass当中的注释有两种：

1. // 这种注释在编译后不会出现在代码当中
2. /**/ 这种注释编译后会出现在代码中 

---

Ruby 安装

装sass之前先确认装了ruby。先导官网下载个ruby
在安装的时候，请勾选 Add Ruby executables to your PATH 这个选项，添加环境变量，不然以后使用编译软件的时候会提示找不到ruby环境

Paste_Image.png

Ruby 的包管理工具 Gem 换源

“Ruby淘宝源“ 声明了：RubyGems 镜像的管理工作以后将交由 Ruby China 负责，以便能有更多的社区爱好者参与进来，保持持续发展。所以我建议直接将源更换到Ruby China。详见Ruby淘宝源

1. gem 查看当前源：

gem source 或 gem source -l

效果如下：

查看当前源

2. gem 换源：

先移除
gem sources --remove https://rubygems.org 
再添加
gem sources --add https://gems.ruby-china.org 

3. 如在换源出现以下错误时( 如果你系统不支持https )
   
   

   换源失败

有一种解决方式：  gem sources --add http://gems.ruby-china.org/
这里注意是http,不是https

4. gem 换源确认(查看是否成功)：

gem source 或 gem source -l

换源成功

以换成淘宝源

Sass安装

安装完 ruby 之后，在开始菜单中，找到刚才我们安装的 ruby，打开 Start Command Prompt with Ruby

Paste_Image.png

在命令行中输入

 gem install sass

安装成功后如图：

Paste_Image.png

可以使用两种方式查看安装后的sass版本

1. gem list 列出本地的所有ruby程序包

Paste_Image.png

2. 使用 sass -v

Paste_Image.png

卸载（删除）Sass

在常期使用的时候难免会碰到无法解决的问题，有时候可能需要卸载 Sass，然后再重新安装 Sass。那么怎么卸载 Sass 呢？

其实他也就是一句命令的事情：

gem uninstall sass
这样就卸载了 Sass ，但这行命令基本上是使用不上。

Compass的安装

Compass 是一个成熟的、基于 Sass 开发的一个框架，这里面集成了很多写好的 mixins 和 Sass 函数

安装
gem install compass
查看版本
compass -v

成功如图：

Paste_Image.png

Sass的编译

• 命令编译

来看一个简单的示例，假设我本地有一个项目，我要把项目中“bootstrap.scss”编译出“bootstrap.css”文件，并且将编译出来的文件放在“css”文件夹中，我就可以在我的命令终端中执行：

sass --watch sass/bootstrap.scss:css/bootstrap.css

一旦我的 bootstrap.scss 文件有任何修改，只要我重新保存了修改的文件，命令终端就能监测，并重新编译出文件：

Paste_Image.png

• GUI工具编译
  Koala (http://koala-app.com/)
  Compass.app（http://compass.kkbox.com/）
  Scout（http://mhs.github.io/scout-app/）
  CodeKit（https://incident57.com/codekit/index.html）
  Prepros（https://prepros.io/）
  相比之下，我比较推荐使用以下两个：
  Koala (http://www.w3cplus.com/preprocessor/sass-gui-tool-koala.html)
  CodeKit (http://www.w3cplus.com/preprocessor/sass-gui-tool-codekit.html)

• 自动化编译

喜欢自动化研究的, 应该都知道 **Grunt **和 **Gulp **这两个东东。如果您正在使用其中的任何一种