sass文件-嵌套规则

1. sass允许将一套CSS样式嵌套进另一套样式中。
   【目的】：避免了重复输入父选择器，结构看起来更清晰并且易于管理。

其中：
（1）内层的样式将它外层的选择器作为父选择器
（2）&将被替换成嵌套外层的父选择器，如果含有多层嵌套，最外层的父选择器会一层一层向下传递。&所在的位置只代表了他的父亲，也就是说在每一层，指向是都是他所在的父元素。

#app {  
    h1 {
        text-align: center;
        &:hover { 
            color: red; 
        }
    }
    &:hover { 
        text-decoration: underline; 
    }
}

等同于

#app h1 { 
    text-align: center; 
}
/*#app中的h1应用了text-align样式*/
#app h1:hover { 
    text-align: center; 
}
#app:hover {
    text-decoration: underline;
}

(3)属性嵌套
有些 CSS 属性遵循相同的命名空间 (namespace)，比如 font-family, font-size, font-weight 都以 font 作为属性的命名空间。为了便于管理这样的属性，同时也为了避免了重复输入，Sass 允许将属性嵌套在命名空间中，例如

.funky {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}

/*编译后*/
.funky {
  font-family: fantasy;
  font-size: 30em;
  font-weight: bold; 
}

参考：Scss中的嵌套规则