如何将Sass编译成CSS

本节咱们来学习 Sass 的编译，咱们写好的 Sass 代码，浏览器是不能识别的，Sass 只不过是做为一个预处理工具，只有将 Sass 代码编译成 CSS 代码后，才可以使用。那么 Sass 要如何编译成 CSS 代码呢，这就是咱们本节须要讲到的内容。

Sass 的编译方法有不少，例如：

• 命令行编译模式：比较简单，能够直接在终端中输入 Sass 指令来编译，本节咱们主要讲命令行编译模式的使用。
• GUI工具编译：有的比较多的看一工具备 Koala、CodeKit、Scout、Compass.app 等，这些工具都须要安装。
• 自动化编译：能够使用 Grunt 或者 Gulp 来配置 Sass 自动化编译。

命令编译

命令编译就是在终端中输入 sass 命令来编译 Sass 代码，这种编译方式使用起来很简单。

示例：

假设如今有一个Sass文件，文件名为 style.scss （Sass 文件的扩展名名 .scss），咱们须要将这个文件中的代码编译成 CSS 代码，能够执行以下命令：

sass style.scss style.css

命令执行成功后，会自动建立一个 style.css 文件。可是这样有一个问题，就是每次更改了 style.scss 文件中的内容，都须要执行一次编译命令，就会很麻烦。

若是要解决上述问题，能够使用监听命令 --watch ，例如：

sass --watch style.scss:style.css

效果以下图所示：

这样一旦咱们修改了 style.scss 文件，只要从新保存，就会将修改内容自动编译到 style.css 文件中。

若是项目中有不少的 sass 文件，能够监听整个目录：

sass --watch app/sass:public/stylesheets

Sass四种输出格式

在编译 Sass 代码时，咱们能够指定 Sass 的编译输出格式，这须要用到 --style 指令，这个指定后面可接以下四种 Sass 输出格式：

• nested：嵌套输出格式，默认格式。
• expanded：展开输出方式。
• compact：紧凑输出方式 。
• compressed：压缩输出方式 。

示例：

例如以 style.scss 文件为例，内容以下所示：

.xkd{
    font-size: 14px;
    color: #ccc;
    .box{
        width: 100px;
        height: 100px;
        border: 1px solid #000;
        border-radius: 5px;
    }
}

• 第一种：使用 nested 编译排版格式输出，能够执行以下命令：

sass style.scss:style.css --style nested

编译后的 CSS 代码：

.xkd {
  font-size: 14px;
  color: #ccc; }
  .xkd .box {
    width: 100px;
    height: 100px;
    border: 1px solid #000;
    border-radius: 5px; }

• 第二种：使用 expanded 编译排版格式输出，能够执行以下命令：

sass style.scss:style.css --style expanded

编译后的 CSS 代码：

.xkd {
  font-size: 14px;
  color: #ccc;
}
.xkd .box {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
  border-radius: 5px;
}

• 第三种：使用 compact 编译排版格式输出，能够执行以下命令：

sass style.scss:style.css --style compact

编译后的 CSS 代码：

.xkd { font-size: 14px; color: #ccc; }
.xkd .box { width: 100px; height: 100px; border: 1px solid #000; border-radius: 5px; }

• 第四种：使用 compressed 编译排版格式输出，能够执行以下命令：

sass style.scss:style.css --style compressed

编译后的 CSS 代码：

.xkd{font-size:14px;color:#ccc}.xkd .box{width:100px;height:100px;border:1px solid #000;border-radius:5px}

这四种输出格式中，通常我会选择使用第二种输出格式，也就是 expanded 格式。这种格式和咱们手写的 CSS 样式差很少，选择器、属性等各占用一行，属性根据选择器缩进，而选择器不作任何缩进。