SASS详解之编译输出的样式

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