SASS是一种CSS预处理语言，没有装环境的话是不能被解析的。但是有了koala编译工具之后，解析SASS不需要环境也毫无压力了。SASS的输出格式有四种：嵌套、扩大、紧凑和压缩。下面结合小例子为大家一一介绍。

嵌套(:nested)

嵌套的风格是默认SASS风格，因为它反映的CSS样式和HTML文档的结构很相似。每个属性都有其自己的嵌套。嵌套式大型CSS文件时，看着是非常有用的，它可以让你轻松掌握文件的结构没有什么实际阅读。反而包含的选择器多了，看起来很是费劲。小例子如下

SASS代码

 

div {  font-size: 14px;  font-family: "Arial"; }  div a {    color: red; }    div a:hover {      text-decoration: underline; }

 

 

编译后的CSS代码

 

div {  font-size: 14px;  font-family: "Arial";}div a {  color: red;}div a:hover {  text-decoration: underline;}

 

 

展开(:expanded)

展开是一个比较典型的人类制造的CSS样式，每个属性和属性值占一行。小例子如下

SASS代码

 

div {	font : {		size :14px;		family:"Arial";	}	a {		color:red;		&:hover {			text:{				decoration:underline;			}		}	}}

 

 

编译后的CSS代码

 

div {  font-size: 14px;  font-family: "Arial";}div a {  color: red;}div a:hover {  text-decoration: underline;}

 

 

紧凑(:compact)

紧凑的风格比嵌套或展开占用的空间较少。每个CSS规则只占用一行，在该行定义每个属性。嵌套规则放置在属性旁边没有换行。小例子如下

SASS代码

 

div {	font : {		size :14px;		family:"Arial";	}	a {		color:red;		&:hover {			text:{				decoration:underline;			}		}	}}

 

 

编译后的CSS代码

 

div { font-size: 14px; font-family: "Arial"; }div a { color: red; }div a:hover { text-decoration: underline; }

 

 

压缩(:compressed)

压缩式占用空间的可能的最小量的，把不必要的空格都删除掉，然后每个属性，每个属性值，每个选择器仅仅挨在一起。小例子如下

SASS代码

 

div {	font : {		size :14px;		family:"Arial";	}	a {		color:red;		&:hover {			text:{				decoration:underline;			}		}	}}

 

 

编译后的CSS代码

 

div{font-size:14px;font-family:"Arial"}div a{color:red}div a:hover{text-decoration:underline}

 

 

SASS详解之编译输出的样式就为大家介绍到这里了，我们可以通过不同的输出样式来适用于不同地方，更加方便了大家的编辑需要。