本文作者：开课吧无忧
图文编辑：开三金

sass编译有很多种方式，如命令行编译模式、编辑器自动编译、编译软件koala、sass-loader等。

今天我们就先来看第一种：命令行编译

刚才我在test文件夹里面已经建立了一个style.scss文件，现在我需要把这个文件编译成css文件，那么我可以先用命令行工具进入这个文件夹 

“cd”就是进入某个文件夹的命令，后面跟上你电脑上文件夹的路径就可以了：

cd test进入文件夹之后再使用sass的编译命令:sass input.scss output.css编译成功不会有任何的提示，但是文件夹里面马上就会出现output.css这个文件这个input是原本的scss文件的名称，然后output是编译出来之后的css文件的名称，这个名称大家可以随意，保持基本命名规则就可以了

利用命令还可以实时监测某个文件，当这个文件发生变化的时候，自动完成编译过程

//单文件监听命令sass --watch input.scss:output.css  在监听成功之后会打印以下代码：>>> Sass is watching for changes. Press Ctrl-C to stop.根据提示，这时候按Ctrl + C可以停止这个命令在监听的过程中如果文件发生改变，并且自动编译成功则会打印以下代码：>>> Change detected to: tests.scss  write output.css  write output.css.map

利用命令还可以实时监测某个文件夹，这个文件夹下的所有scss文件都会被监听

sass --watch targetFolder:outputFolder在监听成功之后会打印以下代码:>>> Sass is watching for changes. Press Ctrl-C to stop.

前面的targetFolder是要监听的目标文件夹，后面的outputFolder是要输出的文件夹。 

比如我想把css文件夹里的scss文件编译到style文件夹里，就可以这样写：

sass --watch css:style

在这里要注意一点：这个时候你需要在css和style文件夹的共同父级文件夹里面才能开启这个功能，否则会报错

在编译的时候，还可以配合编译选项，用于调整输出文件

sass提供四种编译格式：

nested

expanded

compact

compressed

看看区别：

//未编译样式.box {width: 300px;height: 400px;&-title {height: 30px;line-height: 30px;}}

nested 编译排版格式

/*命令行内容*/sass style.scss:style.css --style nested/*编译过后样式*/.box {width: 300px;height: 400px; }.box-title {height: 30px;line-height: 30px; }

expanded 编译排版格式

/*命令行内容*/sass style.scss:style.css --style expanded/*编译过后样式*/.box {width: 300px;height: 400px;}.box-title {height: 30px;line-height: 30px;}

compact 编译排版格式

/*命令行内容*/sass style.scss:style.css --style compact/*编译过后样式*/.box { width: 300px; height: 400px; }.box-title { height: 30px; line-height: 30px; }

compressed 编译排版格式

/*命令行内容*/sass style.scss:style.css --style compressed /*编译过后样式*/.box{width:300px;height:400px}.box-title{height:30px;line-height:30px}

不同的编译格式得到的代码其实是一样的，只是排版格式不同，大家看情况去用就好了。我的建议是，开发的时候用expanded格式，比较清楚。

当你需要发布你的代码的时候，使用compressed格式，这个格式会让css文件相对较小。

你“在看”我吗？