嵌套规则
Sass允许将一套 CSS 样式嵌套进另一套样式中，内层的样式将它外层的选择器作为父选择器，例如：
css样式：
.container {
width: 600px;
height: 600px;
display: flex;
align-items: center;
justify-content: center;
}
.container > div.wrapper {
width: 300px;
height: 300px;
background-color: #f00;
}
sass样式：
.container {
width: 600px;
height: 600px;
display: flex;
align-items: center;
justify-content: center;
div.wrapper {
width: 300px;
height: 300px;
background-color: #f00;
}
}
嵌套规则避免了重复输入父选择器，而且令复杂的 CSS 结构更加易于管理。
父选择器 &
在嵌套CSS规则时，有时候需要对于父元素的直属元素或者对于父元素进行伪类和伪元素的操作，这时候父元素就可以直接使用&来代替，如果样式中含有多层嵌套，最外层的父选择器会一层一层向下传递，例如上面的例子，就可以变为：
.container {
width: 600px;
height: 600px;
display: flex;
align-items: center;
justify-content: center;
&:hover {
cursor: pointer;
}
& > div.wrapper {
width: 300px;
height: 300px;
background-color: #f00;
}
}
属性嵌套
对于某些拥有相同命名空间的 CSS 属性来说，为了便于管理和重复输入，Sass允许将属性嵌套在命名空间中。例如：
.example {
font: {
family: 'Microsoft YaHei';
size: 16px;
weight: bold;
}
}
注释 /* */ 与 //
Sass 支持标准的 CSS /* */注释和 //注释， /* */可以被完整地输出到编译后的CSS文件中， //不会。
