使用 Sass 的方法去创建样式，最终需要把 Sass 编译成普通的 CSS，这样才能在浏览器上去使用。编译 Sass 有很多的方法，有一些图形界面的工具，也可以通过命令行去编译 Sass，在以后跟前端开发工作流程相关的课程里，我们会再介绍一些其它的编译 Sass 的方法。

这个视频先看一下使用命令行工具去编译 Sass 。先打开命令行工具，Mac 用户可以使用终端工具，Windows 用户可以使用命令提示符。我这里用的是终端工具 ... 进入到想要保存项目的位置，cd desktop ... 进入到桌面上 ... 然后去创建一个目录并且进入到这个目录里里面。

mkdir ninghao-sass && cd $_

我们可以再用编辑器，打开在桌面上创建的这个项目的目录 ... 我用的 atom 编辑器，可以直接输入 atom ... 然后回车 ... 这样会用编辑器打开当前所在的目录。

atom

打开以后先在项目下面创建一个目录，可以去存储所有的 sass 文件 ... 这个目录可以叫做 sass ... 在这个目录里再添加一个 sass 文件，命名成 style.scss ...

然后再创建一个叫 css 的目录 ... 在这个目录里面可以存储编译好的 css 文件。

在这个 style.scss 里面，先写点样式 ... 因为 scss 这种格式支持普通的 CSS 样式的写法，所以在这里我们可以像创建一般的 CSS 样式一样 ... 在后面的视频里我们再去介绍 Sass 的一些写法。

body { font-size: 15px; }

回到命令行工具 ... 使用 sass 这个命令，可以把 sass 文件编译成一般的 css 文件 ... 输入 sass ... 后面加上要编译的 sass 文件 ... 这里就是 sass 目录下面的 style.scss ... 然后输入一个冒号，冒号的右边就是要输出的 css 文件。把 style.scss 编译成的 css 文件，放到 css 这个目录的下面，编译以后，叫做 style.css ...

sass sass/style.scss:css/style.css

回到编辑器 ... 打开项目下面的 css 这个目录，在这里，你会看到一个编译好的 css 文件，就是这个 style.css

打开这个文件，然后可以把它分离到编辑器的右边去显示 .. 右键点击这个标签，然后选择 Split Right ，或者也可以使用快捷键 command + K 然后再按下右边的箭头。

这个 style.css 里面的内容就是根据 style.scss 里面写的东西编译之后的结果。我们可以在这个 sass 文件里再添加点东西。添加一个 color 属性。

保存。再回到命令行工具 ... 重新执行一下前面的这条命令 ... 再回到编辑器， style.css 里的内容是重新编译之后的 style.scss 。