SCSS语法格式及编译调试

一、SASS编译

Sass 的编译有多种方法：

命令编译
GUI工具编译
自动化编译

1.1 命令编译

1）单文件编译

sass <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css

2）多文件编译

sass sass/:css/

上面的命令表示将项目中“sass”文件夹中所有“.scss”(“.sass”)文件编译成“.css”文件，并且将这些 CSS 文件都放在项目中“css”文件夹中。

3）watch功能

这样只要你的代码进行任保修改，都能自动监测到代码的变化，并且给你直接编译出来：

sass --watch <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css

1.2 GUI界面工具编译

1.3 自动化编译（Grunt&GULP）

1.4 常见的编译错误

在编译 Sass 代码时常常会碰到一些错误，让编译失败。这样的错误有系统造成的也有人为造成的，但大部分都是人为过失引起编译失败。

而最为常见的一个错误就是字符编译引起的。在Sass的编译的过程中，是不是支持“GBK”编码的。所以在创建 Sass 文件时，就需要将文件编码设置为“utf-8”。

另外一个错误就是路径中的中文字符引起的。建议在项目中文件命名或者文件目录命名不要使用中文字符。而至于人为失误造成的编译失败，在编译过程中都会有具体的说明，大家可以根据编译器提供的错误信息进行对应的修改。

二、不同样式风格

在 Sass 中编译出来的样式风格也可以按不同的样式风格显示。其主要包括以下几种样式风格：

嵌套输出方式 nested
展开输出方式 expanded
紧凑输出方式 compact
压缩输出方式 compressed

2.1 嵌套输出方式nested

Sass 提供了一种嵌套显示 CSS 文件的方式。

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

在编译的时候带上参数“ --style nested”:

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

编译出来的 CSS 样式风格：

nav ul {
  margin: 0;
  padding: 0;
  list-style: none; } // 末尾大括号没换行
nav li {
  display: inline-block; }
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none; }

2.2 SASS展开输出方式

同样的输入例子2.1

在编译的时候带上参数“ --style expanded”:

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

这个输出的 CSS 样式风格和 nested 类似，只是大括号在另起一行，同样上面的代码，编译出来：

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}  // 末尾大括号另起一行
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

2.3 嵌套输出方式 compact

在编译的时候带上参数“ --style compact”:

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

该方式适合那些喜欢单行 CSS 样式格式的朋友，编译后的代码如下：

nav ul { margin: 0; padding: 0; list-style: none; }
nav li { display: inline-block; }
nav a { display: block; padding: 6px 12px; text-decoration: none; }

2.4 压缩输出方式 compressed

在编译的时候带上参数“ --style compressed”:

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

压缩输出方式会去掉标准的 Sass 和 CSS 注释及空格。也就是压缩好的 CSS 代码样式风格：

nav ul{margin:0;padding:0;list-style:none}nav li{display:inline-block}nav a{display:block;padding:6px 12px;text-decoration:none}

一段时间之后，你实际上就不再需要写 CSS 代码了，只用写 Sass 代码。在这种情况下，你只需要设定输出格式为压缩格式，知道输出的 CSS 代码可以直接使用即可。

三、SASS调试

Sass 调试一直以来都是一件头痛的事情，使用 Sass 的同学都希望能在浏览器中直接调试 Sass 文件，能找到对应的行数。值得庆幸的是，现在实现并不是一件难事，只要你的浏览器支持“sourcemap”功能即可。早一点的版本，需要在编译的时候添加“--sourcemap” 参数：

sass --watch --scss --sourcemap style.scss:style.css

在 Sass3.3 版本之上（我测试使用的版本是 3.4.7），不需要添加这个参数也可以：

sass --watch style.scss:style.css

在命令终端，你将看到一个信息：

>>> Change detected to: style.scss
write style.css
write style.css.map

这时你就可以像下面展示的 gif 图一样，调试你的 Sass 代码。