初学sass

刚开始学习sass，原来并不懂sass是什么，在慕课网上才发现，原来sass是一种css预处理器。

那么，什么是css预处理器呢？

（本博加蓝部分来自与慕课网 http://www.imooc.com/learn/311）

CSS 预处理器用一种专门的编程语言，进行 Web 页面样式设计，然后再编译成正常的 CSS 文件，以供项目使用。CSS 预处理器为 CSS 增加一些编程的特性，无需考虑浏览器的兼容性问题

原来如此，利用sass我们能将css代码像写js代码一样，创建变量并赋值，等到需要使用它的就直接引用就好。这样就减少了书写重复代码。

那么，怎么使用sass呢？

这时我才发现，原来sass还分sass和scss？那么它们有什么区别？

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

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

Sass 语法

$font-stack: Helvetica, sans-serif  //定义变量
$primary-color: #333 //定义变量

body
  font: 100% $font-stack
  color: $primary-color

SCSS 语法

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

编译出来的 CSS

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

我这时就又有疑问了？那么到底是用sass格式还是scss格式啊？

SCSS 和 CSS 写法无差别：

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

到这里我终于明白了，原来我们使用scss格式会比较贴近我们之前的css的格式。

这时候我当然迫不及待地尝试书写sass文件去渲染页面，但是写完引入，发现样式并没有添加到网页元素中？

这是为什么呢？

原来，我们书写的sass文件还是需要编译的，我们最终导入的还是经过编译的sass文件，sass文件编译后变成css文件。如下：

常常有人会问，使用 Sass 进行开发，那么是不是直接通过“<link>”引用“.scss”或“.sass”文件呢？

那么这里告诉大家，在项目中还是引用“.css”文件，Sass 只不过是做为一个预处理工具，提前帮你做事情，只有你需要时候，他才有攻效。

那么，如何编译呢？

首先，我们要为电脑安装sass

大家可以到 Ruby 的官网（http://rubyinstaller.org/downloads）下载对应需要的 Ruby 版本。

Ruby 安装文件下载好后，可以按应用软件安装步骤进行安装 Ruby。在安装过程中，个人建议将其安装在 C 盘下，在安装过程中选择第二个选项（不选中，就会出现编译时找不到Ruby环境的情况），如下图所示：

Ruby 安装完成后，在开始菜单中找到新安装的 Ruby，并启动 Ruby 的 Command 控制面板

通过命令安装 Sass

打开电脑的命令终端，输入下面的命令：

gem install sass

提醒一下，在使用 Mac 的同学，可能需要在上面的命令前加上"sudo"，才能正常安装：

sudo gem install sass

其实还有其它方法安装sass，但是由于我觉得这个方法比较适合我，所以大家需要其他方法可以去 http://www.imooc.com/code/6389 查看。

通过上面的几种方法都可以安装 Sass，但是，我们要如何确认自己是否安装 Sass 成功了呢？其实很简单，只需要通过下面的命令即可：

sass -v

更新 Sass

维护 Sass 的团队会不断的为 Sass 添加新的功能，那么如何确保自己已安装的 Sass 也具有这些新的功能特性呢？不会是卸载了重新安装吧（虽然安装也就是一个命令的事情）？ 其实不需要这么麻烦，只需要在命令终端执行：

gem update sass

好了，安装完，我们到底如何编译sass文件呢？

Sass 的编译有多种方法：

• 命令编译
• GUI工具编译
• 自动化编译

那么如何进行命令编译呢？

命令编译是指使用你电脑中的命令终端，通过输入 Sass 指令来编译 Sass。这种编译方式是最直接也是最简单的一种方式。因为只需要在你的命令终端输入：

单文件编译：

sass <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css

这是对一个单文件进行编译，如果想对整个项目所有 Sass 文件编译成 CSS 文件，可以这样操作：

多文件编译：

sass sass/:css/

上面的命令表示将项目中“sass”文件夹中所有“.scss”(“.sass”)文件编译成“.css”文件，并且将这些 CSS 文件都放在项目中“css”文件夹中。

缺点及解决方法：

在实际编译过程中，你会发现上面的命令，只能一次性编译。每次个性保存“.scss”文件之后，都得重新执行一次这样的命令。如此操作太麻烦，其实还有一种方法，就是在编译 Sass 时，开启“watch”功能，这样只要你的代码进行任保修改，都能自动监测到代码的变化，并且给你直接编译出来：

sass --watch <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css

当然，使用 sass 命令编译时，可以带很多的参数：

watch 举例：

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

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

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

这样就可以导入编译后的css文件，愉快地进行开发啦~