Sass中的层级结构

SASS 中的层级结构，和 LESS 一样支持嵌套，默认情况下嵌套的结构会转换成后代选择器，和 LESS 一样也支持通过 & 符号不转换成后代选择器

.father {
  width: 300px;
  height: 300px;
  background: red;

  .son {
    width: 200px;
    height: 200px;
    background: blue;
  }
}

• 通过 & 符号不转换成后代选择器

.father {
  width: 300px;
  height: 300px;
  background: red;

  &.son {
    width: 200px;
    height: 200px;
    background: blue;
  }
}

.father {
  width: 300px;
  height: 300px;
  background: red;

  &:hover {
    width: 200px;
    height: 200px;
    background: pink;
  }

  .son {
    width: 200px;
    height: 200px;
    background: blue;
  }
}