Sass的四种编译方式

　　Sass环境搭建，详情见另一篇博文 安装Ruby、Sass与Compass

　　我们都知道Sass其实有两种，一种是Sass，一种是SCSS。

　　Sass 和 SCSS 其实是同一种东西，我们平时都称之为 Sass，两者之间不同之处有以下两点：

1. 文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名
2. 语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)，而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。

　　今天我要讲的SCSS编译方式是命令编译方式，在命令编译方式中有不同样式风格的输出方法。分别是

1. 嵌套输出方式 nested
2. 展开输出方式 expanded  
3. 紧凑输出方式 compact 
4. 压缩输出方式 compressed

　　

　　例如 style.scss文件的代码如下，现要通过以上四种方式来编译：　

@charset "utf-8";
#box{
    width:400px;
    height:400px;
    border:1px solid gray;
    h1{
        font-size:22px;
        color:red;
    }
    p{
        font-size:18px;
        color:green;
    }
}

 

　　

　　（1）、nested(嵌套输出)方式：　

　　现在要将其编译成style.css文件。

　　命令为： sass style.scss:style1.css --style nested 

　　编译后代码如下：　

#box {
  width: 400px;
  height: 400px;
  border: 1px solid gray; }
  #box h1 {
    font-size: 22px;
    color: red; }
  #box p {
    font-size: 18px;
    color: green; }

　　可以看到代码行间还是有一定的缩进的。

 

　　（2）、expanded(展开输出)方式

　　同样是style.scss文件将其编译为style1.css文件。

　　命令为： sass style.scss:style1.css --style expanded 

　　编译后代码为：　

#box {
  width: 400px;
  height: 400px;
  border: 1px solid gray;
}
#box h1 {
  font-size: 22px;
  color: red;
}
#box p {
  font-size: 18px;
  color: green;
}

　　可以看出编译后和css的书写规则是一样的。

 

　　（3）、compact(紧凑输出)方式。

　　将style.scss文件编译成style2.css文件。

　　命令为： sass style.scss:style2.css --style compact 

　　编译后结果为：

#box { width: 400px; height: 400px; border: 1px solid gray; }
#box h1 { font-size: 22px; color: red; }
#box p { font-size: 18px; color: green; }

　　

　　（4）、compressed(压缩输出)方式。

　　将style.scss文件编译成style3.css文件。

　　命令为： sass style.scss:style3.css --style compressed 

　　编译后结果为：

　　 #box{width:400px;height:400px;border:1px solid gray}#box h1{font-size:22px;color:red}#box p{font-size:18px;color:green}