今天完成的事情：用sass重写了任务十二的第一个页面。

明天计划的事情：抓紧写完第二个页面，完成任务十二，开始任务十三。

遇到的问题：暂时没遇到什么困难，不过自己写代码的速度确实有点慢了。

收获：做任务十一的时候，sass只是用了简单的嵌套，任务十二比任务十一复杂点，开始试着用变量和混合器，然后写完我发现sass代码写了160行，转换成css143行，代码量好像还变多了。一般来说有超过三个地方需要用到相同的一种颜色，才给它设置变量，同样的，当反复需要用到同一种样式的时候，比如垂直居中，才做一个混合器，不然反而会增加代码量，不过现在的我还是以练习为主，多设置几个变量，混合器就当熟悉sass的使用了，不过混合器传参方面的还没用到过。

5-3. 给混合器传参;

混合器并不一定总得生成相同的样式。可以通过在@include混合器时给混合器传参，来定制混合器生成的精确样式。当@include混合器时，参数其实就是可以赋值给css属性值的变量。如果你写过JavaScript，这种方式跟JavaScript的function很像：

@mixin link-colors($normal, $hover, $visited) {
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}

当混合器被@include时，你可以把它当作一个css函数来传参。如果你像下边这样写：

a {
  @include link-colors(blue, red, green);
}

//Sass最终生成的是：

a { color: blue; }
a:hover { color: red; }
a:visited { color: green; }

当你@include混合器时，有时候可能会很难区分每个参数是什么意思，参数之间是一个什么样的顺序。为了解决这个问题，sass允许通过语法$name: value的形式指定每个参数的值。这种形式的传参，参数顺序就不必再在乎了，只需要保证没有漏掉参数即可：

a {
    @include link-colors(
      $normal: blue,
      $visited: green,
      $hover: red
  );
}

尽管给混合器加参数来实现定制很好，但是有时有些参数我们没有定制的需要，这时候也需要赋值一个变量就变成很痛苦的事情了。所以sass允许混合器声明时给参数赋默认值。

5-4. 默认参数值;

为了在@include混合器时不必传入所有的参数，我们可以给参数指定一个默认值。参数默认值使用$name: default-value的声明形式，默认值可以是任何有效的css属性值，甚至是其他参数的引用，如下代码：

@mixin link-colors(
    $normal,
    $hover: $normal,
    $visited: $normal
  )
{
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}

如果像下边这样调用：@include link-colors(red) $hover和$visited也会被自动赋值为red。

混合器只是sass样式重用特性中的一个。我们已经了解到混合器主要用于样式展示层的重用，如果你想重用语义化的类呢？这就涉及sass的另一个重要的重用特性：选择器继承。