Sass的四种编译方式

我们都知道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}

作者：江峰★ 
出处：http://www.cnblogs.com/jf-67/ 
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接，否则保留追究法律责任的权利