css预处理 sass 嵌套

Sass是一款强化css的辅助工具，完全兼容css3
在css基础上增加了变量、嵌套(nesting)、混合(mixins)、导入
Sass有两种语法：一种是scss，一种是sass。一般我们倾向于scss，
两种格式可以相互转换。

变量

当有了变量之后，如果要改变颜色代码，只要修改变量的值就好了

/* 定义颜色变量，要修改颜色值，修改这里就可以了 */
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;
$primary_3: #878f99;

/* 使用变量 */
.main-header {
  background-color: $primary_1;
}

.menu-left {
  background-color: $primary_2;
}

.menu-right {
  background-color: $primary_3;
}

嵌套

Sass 允许将一套 CSS 样式嵌套进另一套样式中，内层的样式将它外层的选择器作为父选择器

父选择器

在嵌套 CSS 规则时，有时也需要直接使用嵌套外层的父选择器，例如，当给某个元素设定 hover 样式时，或者当 body 元素有某个 classname 时，可以用 & 代表嵌套规则外层的父选择器。

编译后的 CSS 文件中 & 将被替换成嵌套外层的父选择器，如果含有多层嵌套，最外层的父选择器会一层一层向下传递。

& 必须作为选择器的第一个字符，其后可以跟随后缀生成复合的选择器。