SASS详解之编译输出的样式

柔情只为你懂 2022-09-17 12:18 188阅读 0赞

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