Sass教程三：编译Sass（命令行）

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文件相对较小。