很多人从使用Scss的那一刻起就被告知如何编译。因此，基本上只有一种命令编译方式。事实上，Scss提供了4种样式来输出CSS，以满足更多人的需求。不同的输出方式如下：嵌套输出方式nested扩展输出方式expanded紧凑输出方式compact压缩输出方式compressed那么以后就可以随意使用参数生成自己喜欢的CSS样式了。这里推荐一个导航，笔尖网站导航——用心做最简洁的网站导航1.nestednested是嵌套输出样式，即左花括号和CSS类名（第一行）对齐。右花括号与最后一行在同一行，没有换行。这种风格一般用的比较少，因为平时这样写CSS的人不多，而且风格比较别扭。编译命令为：sassabc.scss:abc.css--stylenested生成结果：.header{background:#f00;颜色：#000；字体大小：20px；}.sidebar{浮动：左；宽度：300px；高度：500px；}.main{浮动：对；宽度：800px；填充：20px；最小高度：500px；}2.expandedexpanded是扩展输出方式，也是一般前端开发中经常使用的一种风格，直接写CSS。它的左花括号与第一行在同一行，没有换行。右边的大括号在末尾换行并开始新的一行。编译命令为：sassabc.scss:abc.css--styleexpanded生成结果：.header{background:#f00;颜色：#000；font-size:20px;}.sidebar{float:left;宽度：300px；height:500px;}.main{float:right;宽度：800px；填充：20px；min-height:500px;}3.compactcompact是一种紧凑的输出方式，也是前端开发更直接使用的另一种写CSS的方式。它的左花括号和右花括号不是换行的。花括号里面的CSS属性值没有换行，一个接一个写。对于喜欢写单行CSS的朋友来说非常友好。编译命令为：sassabc.scss:abc.css--stylecompact生成结果：.header{background:#f00;颜色：#000；字体大小：20px；}.sidebar{浮动：左；宽度：300px；高度：500px；}.main{浮动：对；宽度：800px；填充：20px；最小高度：500px；}4.compressedcompressed是压缩输出方法。它的所有内容都被解包，所有注释和空格都被删除。将所有代码压成一个球。一般用于在线情况，或者根本不需要读取和修改CSS文件的情况。文件会更小。编译命令为：sassabc.scss:abc.css--stylecompressed生成结果：.header{background:#f00;color:#000;font-size:20px}.sidebar{float:left;width:300px;高度：500px}.main{float:right;width:800px;padding:20px;min-height:500px}
