Sass 使用

1. 通过命令行使用 Sass

前面我们讲了 Sass 的安装，假如你在 Ruby 环境下安装了 Sass ，我们可以直接通过命令行来使用 Sass ，Sass 提供了很多命令像编译、配置等等，下面我们写出一些常用的命令供你参考：

//单个文件转换命令, 将 a.scss 的内容转换为 css 到 b.css 中
$ sass a.scss b.css
//单文件监听命令，文件发生变化则自动编译
$ sass --watch a.scss:b.css
// 监听指定的目录
$ sass --watch assets/sass:public/styles
// 在运行Sass之前加载一个Ruby gem 将内容加载到 Sass 环境中
$ sass --require=rails-sass-images style.scss style.css
// 加载Compass框架并使其mixin和函数可用于Sas
$ sass --compass style.scss style.css
// 设置输出格式
 $ sass --style=nested
 // 帮助文档
 $ sass --help

命令就介绍这么多了，一般我们前端工程师直接在命令行使用 Sass 的情况很少，我们主要还是看下面在前端项目中的使用。

2. 在前端项目中使用

在目前主流的前端项目中，一般是使用 Webpack 来构建我们的前端项目，并且大多数都跑在 Node 环境下，所以首先我们要安装 node-sass，在前面的安装章节已经讲解。

安装好 node-sass 后还需要执行如下命令安装 sass-loader ：

npm install sass-loader --save-dev

安装好 sass-loader 后按照 Webpack 文档配置 sass-loader 后就可以在项目中使用了。下面配出视频演示：

3. 在线 Sass 转 CSS

对于本系列教程，我还是建议你使用在线 Sass 转 CSS ，这样可以边学边写然后还能实时的看见转换后的 CSS 是什么样的，在后面的章节中我也会以演示转换后的 CSS 为主来讲解 Sass 语法，你可以使用这个非常好用的在线 Sass 转 CSS （sassmeister.com），下面我来演示下如何使用它：