Sass 基础教程——安装_dart-sass 安装

本篇主要如何安装 Sass，并不需要 CSS 知识，不过对 CSS 不熟悉的同学可参考我之前写的系列教程：

• CSS入门篇
• CSS进阶篇
• CSS高级篇

上一篇我们提到过：Sass 是一种 CSS 的扩展语言，也是一种脚本语言，需要转换成 CSS 才能在浏览器中使用。

同时，Sass 还是一个预处理器（preprocessor），用于完成 Sass 代码到 CSS 代码的准换。

所以，当我们谈论 Sass 时，除了指代它作为一门脚本语言的语法，还包括预处理器的概念。

作为预处理器，它的安装方式有很多种，下面我们以目前最流行的 Dart Sass 为例，逐一介绍。

安装

使用安装包进行安装

dart-sass 是一个开源项目，它的所有 release 颁布都会公开在 Github 上。

选择操作系统所对应的压缩包，解压，将可 sass 这个可执行文件的路径设置到系统环境变量 PATH 中去，搞定。

这种方式虽然很直观，但设置环境变量难免有些麻烦，不如一行命令就搞定来得简单。

使用 NPM 进行安装

如果操作系统已经安装 Node.js，可以直接利用 npm 命令来安装：

$ npm install -g sass
1

其中，-g 表示全局安装。

这个版本的 Sass 是 Dart Sass 的一个分发版本 (distribution)，不过被编译成了纯 JavaScript 语言。

Mac OSX 使用 Homebrew 进行安装

如果操作系统是 Mac OSX，还可以使用 Homebrew 来安装，也是一行命令，非常简单：

$ brew install sass/sass/sass
1

通过以上任何一种方式安装完成之后，可以用以下命令查看是否安装成功：

$ sass --version
1

转译成 CSS 代码

Dart Sass 安装成功之后，可以通过以下命令将 Sass/SCSS 代码转译成 CSS 代码：

$ sass source/stylesheets/index.scss build/stylesheets/index.css
1

其中 source/stylesheets/index.scss 为 SCSS 源文件，build/stylesheets/index.css 为目标 CSS 文件。

使用 GUI 工具来安装

除了通过命令行来使用 Sass，还有很多 GUI 应用，目前主流的有：

• Koala
• Compass.app
• Scout
• CodeKit
• Prepros

在 VS Code 中使用 Sass

选择 VS Code 作为编辑器的开发者越来越多，直接在 VS Code 中使用 Sass 也是一个不错的选择，不但可以实时查看转译结果，而且支持语法高亮。

不过，需要安装一个插件 Live Sass Compiler：

安装完成之后，在 VS Code 中打开 SCSS 文件，底部工具栏会出现一个 Watch Sass 的按钮，点击之后就可以监听 SCSS 文件的变化，实时生成 CSS 代码。

以上就是 Sass 的安装方式，下一篇将介绍 SCSS 的基础语法。