Sass 嵌套

嵌套规则

Sass 容许咱们将以与html相同的方式嵌套css选择器，将一套 CSS 样式嵌套进另外一套样式中，内层的样式将它外层的选择器做为父选择器，好比：

// .scss语法
    #main {
      width: 97%;
      p, div {
        font-size: 2em;
        a { 
        	font-weight: bold; 
        }
      }
      pre { 
      	font-size: 3em; 
      }
    }
    
    // 编译为.css
    #main {
    	width: 97%; 
    }
    #main p, #main div {
        font-size: 2em; 
    }
    #main p a, #main div a {
    	font-weight: bold; 
    }
    #main pre {
    	font-size: 3em; 
    }

嵌套功能避免了重复输入父选择器，并且也使得复杂的 CSS 结构更加便于管理。

注意：在Sass中，ul、li和a选择器嵌套是在nav选择器中的，在css中，规则时逐个定义的（不是嵌套的）。

父选择器 &

在嵌套 CSS 规则时，有时候咱们须要直接使用到嵌套外层的父选择器，好比，当给某一个元素设定 hover 样式时或者是当 body 元素有个 classname 时，能够用 & 表明嵌套规则外层的父选择器。

嵌套属性

许多CSS属性具备相同的前缀 ，好比 font-family，font-size，font-weight ，text-align，text-transform，text-overflow 前三者和后三者分别是以 font 和 text 做为属性的命名空间，为了便于管理这样的属性，同时也为了不重复输入，Sass 容许将属性嵌套在命名空间中。

// .scss 语法
    font: {
      family: Helvetica, sans-serif;
      size: 24px;
      weight: bold;
    }
    text: {
      align: center;
      transform: lowercase;
      overflow: hidden;
    }
    
    // 编译后的普通css
    font-family: Helvetica, sans-serif;
    font-size: 24px;
    font-weight: bold;
    
    text-align: center;
    text-transform: lowercase;
    text-overflow: hidden;

占位符选择器 %foo

Sass 额外提供了一种特殊类型的选择器：占位符选择器 (placeholder selector)，它与经常使用的 id 与 class 选择器写法类似，只是 # 或 . 替换成了 %，必须经过 @extend 指令调用。