sass纯新手（一）

　　说是教程还真是有点不敢当，只是将自己今天上手sass的流程给记录下来，给一些和我一样的小白菜一点参考而已，照着走一遍应该就会对sass有基本的认识了，也请大神们不吝赐教。

　　很久之前同事做了一个关于sass的分享，由于一直有项目在手，没有时间去了解，以至于拖到了现在，写完移动端的总结之后就没有什么事干了，今天无聊了一上午，决定花4天时间，也就是过年前还没放假的这几天来研究sass（小白菜说研究好害羞呀~~），毕竟，我还是个从石器时代来的人，是该进化一点点了。

　　今天在网上查了一下关于sass的资料，发现大多数教程直接就开始写sass的语法了，语法都快看烂了，可能当时脑子进水了，一直在纠结怎么建sass文件，或者说是，建好的sass文件应该放在哪里比较合适。只有我这种白菜才到处百度如何新建一个sass文件，不过我还是相信，只要有一个我，就会有千千万万个我，不知道的人应该还是有的，那么，就开始吧。

　　1、sass是什么

　　Sass 是Syntactically Awesome Stylesheete Sass的缩写，它是一种CSS预处理器（CSS 预处理器用一种专门的编程语言，进行 Web 页面样式设计，然后再编译成正常的 CSS 文件，以供项目使用。CSS 预处理器为 CSS 增加一些编程的特性，无需考虑浏览器的兼容性问题），它允许我们使用变量、简单的逻辑程序、函数等在编程语言中的一些基本特性，可以让我们的 CSS 更加简洁、适应性更强、可读性更佳，更易于代码的维护。

　　Sass有两种后缀名文件：一种后缀名为sass，不使用大括号和分号；另一种就是我们这里使用的scss 文件，这种和我们平时写的 css 文件格式差不多，使用大括号和分号，官方建议使用后缀名为 scss 的文件，以避免 sass 后缀名的严格格式要求报错。

　　2、sass安装

　　很久以前我准备过要开始玩sass，所以环境很早就搭好了的，只是刚搭完就一直没空了，所以现在我就不按流程一步一步的贴出来了，只是提醒一下大家，sass是ruby语言写的，所以在安装sass之前需要先安装ruby，但是二者的语法没有任何关系，不懂ruby也可以的，我也不懂。附上sass安装链接：http://www.w3cplus.com/sassguide/install.html

　　3、sass使用

　　sass文件就是普通的文本文件，里面可以直接使用CSS语法和一些简单的编程，文件后缀名是.scss。

　　1）新建文件。我这里html里面引用的是scss，在浏览器中打开也可以看到.scss文件，使用方式和CSS一样。

 <link rel="stylesheet" type="text/css" href="style.scss">

　　2）配置。

　　在命令行输入：sass --help，我们就能够查询到sass命令的常用配置选项。这里我们只介绍两种：

　　　　--style NAME：Output style. Can be nested (default), compact, compressed, or expanded.表示解析后的CSS是什么格式，有4种取值。

　　　　--watch Watch files or directories for changes.The location of the generated CSS can be set using a colon:

　　　　　　sass --watch input.sass:output.css
　　　　　　sass --watch input-dir:output-dir 监听命令，可以监听文件或者是文件夹，一旦源文件有变动，就会自动生成编译后的版本。按Ctrl + C可以停止监听。

　　3）编译。

　　将.scss文件编译成css文件用在项目中，.scss文件编译的时候使用的是ruby的环境，容易出现问题，在命令行输入sass命令：sass style.scss style.css，不出意外的话会报错：

　此处附上解决办法：http://www.vcerror.com/?p=1835 找到ruby的安装目录，找到里面的sass模块：D:\soft\Ruby\install\Ruby23-x64\lib\ruby\gems\2.3.0\gems\sass-3.4.22\lib\sass，打开文件engine.rb，在所有的require模块后面加上一句Encoding.default_external = Encoding.find('utf-8')代码，重新编译.scss文件就不会报错了，重新编译后文件夹中多了以下文件：

编译生成的CSS文件如下：

@charset "UTF-8";

/*

*用CSS的标准注释

*开启sass之旅

*这是一段会被转译出来的注释

*/

body {

  padding: 5px;

}

div {

  margin-top: 10px;

}

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

编译选项有四种：

　　nested：嵌套缩进的css代码，它是默认值。（我们上面生成的CSS文件就是这种嵌套缩进的代码）

　　expanded：没有缩进的、扩展的css代码。（这一种编译生成的代码风格是我最能够接受的，所以后面我会把它变成这种风格）

　　compact：简洁格式的css代码。

　 compressed：压缩后的css代码。（一般用于生产环境）

　　准备工作就算是完了，假装算是入了个门吧