Sass 安装

1. 前言

这一小节我们来学习如何安装 Sass ，本小节会分别讲解在 Ruby 环境和 Node 环境下安装 Sass 。一般来讲我们前端的项目工程都是在 Node 环境下的，所以我会重点讲解在 Node 环境下的前端工程中安装 Sass ，同时本节还会讲述在安装 Sass 时容易遇到的问题和解决方案。

2. 在 Ruby 环境中安装 Sass

Ruby 是一门开源的动态编程语言，Sass 就是基于 Ruby 语言开发而成的，当然你没必要去深入 Ruby 的知识，这里只要了解一下就可以了，所以我们先来讲如何在 Ruby 环境下安装 Sass 。

2.1 安装 Ruby

首先我们要在电脑上安装 Ruby ，Mac 电脑自带 Ruby 无需再次安装；Windows 电脑首先需要下载 Ruby，建议使用 Ruby+Devkit 2.6.X (x64) 安装程序。安装 Ruby 完成后可以在命令行测试是否安装成功：

$ ruby -v
// 出现如下内容则表示安装成功
ruby 2.3.7p456 (2018-03-28 revision 63024) [universal.x86_64-darwin18]

上面我是在 MacOS 的命令行敲击的命令，在 Windows 中也是一样的。在安装后我们需要使用 RubyGems 2.6.x 以上版本来安装 Sass。 RubyGems 是用来安装基于 Ruby 的软件的，就像我们常用的 npm 包管理器。

2.2 安装 Sass

安装好 Ruby 后，我们可以直接使用它像下面这样安装 Sass ：

// 如遇权限问题请使用 sudo 权限
$ gem install sass

安装完成后你需要在命令行中敲击如下命令来查看是否安装成功：

$ sass -v
// 出现 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 的知识会在后面的章节详细说明，下面我们讲解在前端的项目中是如何安装 Sass 的。

3. 在前端项目中安装 Sass

上面我们讲了在 Ruby 环境中安装 Sass ，但我们前端在 Ruby 环境下开发是非常少的，我们前端现在基本都使用 Webpack 构建，一般都是在 Node 环境开发，那在前端项目里是如何安装 Sass 呢？

首先你要知道 node-sass 和 dart-sass ，这两个都是提供好的类库，是 Sass 的实现，本身 Sass 是使用 Ruby 语言写的，但是它提供了很多接口以方便其他语言来集成和封装，node-sass 和 dart-sass 就是基于 LibSass（ Sass 的 C 版本）封装而来的。

它们和 LibSass 的关系就是橘子和橘子汁的关系，我们前端基本也都是通过这两个库来使用 Sass ，我们画个图来看下它们的关系：
图片描述

本章节我们以 node-sass 为例，本教程中所有的内容都是以 node-sass 为例的。

3.1 使用 npm 安装 node-sass

在 Ruby 环境安装 Sass 我们使用了 gem ，那么在安装 node-sass 的时候我们需要使用 npm ，作为前端你一定是知道 npm 包管理器的，所以我们直接像下面这样使用 npm 安装：

$ npm install node-sass

// 将 node-sass 写入项目的 package.json 中
$ npm install node-sass --save-dev

上面我们仅仅是在 Node 环境安装了 Sass，但我们前端的项目是使用 Webpack 来构建，那么我们还需要使用 sass-loader 来编译项目中的 Sass ，所以我们需要在 Webpack 的配置中配置 sass-loader ，配置如下：

// webpack.config.js
module.exports = {
  ...
  module: {
    rules: [{
      test: /\.scss$/,
      use: [{
          loader: "style-loader" // 将 JS 字符串生成为 style 节点
      }, {
          loader: "css-loader" // 将 CSS 转化成 CommonJS 模块
      }, {
          loader: "sass-loader" // 将 Sass 编译成 CSS
      }]
    }]
  }
};

上面就是在我们的前端项目中安装 Sass 的方式，后面我们将详细介绍 Sass 的使用，更多关于 Webpack 的配置请查阅 Webpack 文档。

4. 常见问题

一般我们比较常见的问题就是安装 sass 或者 node-sass 特别慢导致安装失败，由于国内网络的限制我们需要切换 gem 和 npm 源。切换 gem 源使用如下命令：

gem sources --add https://gems.ruby-china.com/ --remove https://rubygems.org/
// 查看 gem 源
gem sources -l

使用 npm 安装 node-sass 过慢的话我们可以使用 cnpm 来替换 npm ，或者使用如下命令切换 npm 源：

npm install -g mirror-config-china --registry=http://registry.npm.taobao.org

5. 小结

本节我们主要讲解了在 Ruby 环境下安装 Sass 和在 Node 环境下安装 Sass ，以及在前端使用 Webpack 构建的项目中安装 Sass，我们画个流程图来回忆一下本节的内容，首先我们回忆下在 Ruby 环境安装 Sass 的流程：
图片描述

最后我们再回顾下在 Node 环境中安装 Sass：
图片描述