PS: 本文操作均在Windows下
Sass
Sass 是采用 Ruby 语言编写的一款 CSS 预处理语言，它诞生于2007年 Sass 是一门高于 CSS 的元语言，它能用来清晰地、结构化地描述文件样式，有着比普通 CSS 更加强大的功能。Sass 能够提供更简洁、更优雅的语法，同时提供多种功能来创建可维护和管理的样式表。
Sass和Scss的关系
Sass 和 Scss 其实是同一种东西，我们平时都称之为 Sass，两者之间不同之处有以下两点：
- 文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名
- 语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)，而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。
Sass/Scss和纯 CSS 写法
-
Sass 和 CSS 写法有差别：
Sass 和 CSS 写法的确存在一定的差异，由于 Sass 是基于 Ruby 写出来，所以其延续了 Ruby 的书写规范。在书写 Sass 时不带有大括号和分号，其主要是依靠严格的缩进方式来控制的。如：
Sass写法：
body color: #fff background: #f36
而在 CSS 我们是这样书写：
body**{** color:#fff; background:#f36;**}**
-
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淘宝源
- gem 查看当前源：
gem source 或 gem source -l
效果如下：
查看当前源
- gem 换源：
先移除
gem sources --remove https://rubygems.org
再添加
gem sources --add https://gems.ruby-china.org
- 如在换源出现以下错误时( 如果你系统不支持https )
换源失败
有一种解决方式： gem sources --add http://gems.ruby-china.org/
这里注意是http,不是https
- gem 换源确认(查看是否成功)：
gem source 或 gem source -l
换源成功
以换成淘宝源
Sass安装
安装完 ruby 之后，在开始菜单中，找到刚才我们安装的 ruby，打开 Start Command Prompt with Ruby
Paste_Image.png
在命令行中输入
gem install sass
安装成功后如图：
Paste_Image.png
可以使用两种方式查看安装后的sass版本
-
gem list列出本地的所有ruby程序包
Paste_Image.png
- 使用
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 **这两个东东。如果您正在使用其中的任何一种
网友评论