今天完成的事：

学习sass编程，对任务四用sass重构

明天计划的事：

完成任务11，深度思考，开始做任务12，

遇到的问题：

刚开始学sass对它的变量嵌套规则有点难理解，比css更注重逻辑性

收获：

1. 嵌套规则 (Nested Rules)

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

嵌套功能避免了重复输入父选择器，而且令复杂的 CSS 结构更易于管理

2. 父选择器 & (Referencing Parent Selectors: &)

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

编译后的 CSS 文件中 & 将被替换成嵌套外层的父选择器，如果含有多层嵌套，最外层的父选择器会一层一层向下传递& 必须作为选择器的第一个字符，其后可以跟随后缀生成复合的选择器

3. 属性嵌套 (Nested Properties)

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

命名空间也可以包含自己的属性值

4. 变量 $ (Variables: $)

SassScript 最普遍的用法就是变量，变量以美元符号开头，赋值方法与 CSS 属性的写法一样

$width: 5em;

直接使用即调用变量：

#main {
  width: $width;
}

变量支持块级作用域，嵌套规则内定义的变量只能在嵌套规则内使用（局部变量），不在嵌套规则内定义的变量则可在任何地方使用（全局变量）。将局部变量转换为全局变量可以添加 !global声明