今天完成的事情：学习任务十四 十五。 看一下 js。

明天计划的事情：琢磨一下组件库 组件快拆出模块。

遇到的问题：老虎遇到乌龟了 ，不知道从哪里像下手 ，准备跟着官网的步骤来。又看了一下sass的控制命令 if for 这些东西。没太搞懂啥作用

收获：

控制指令 (Control Directives)

SassScript 提供了一些基础的控制指令，比如在满足一定条件时引用样式，或者设定范围重复输出格式。控制指令是一种高级功能，日常编写过程中并不常用到，主要与混合指令 (mixin) 配合使用，尤其是用在 Compass 等样式库中。

1. @if

当 @if 的表达式返回值不是 false 或者 null 时，条件成立，输出 {} 内的代码：

p {  @if 1 + 1 == 2 { border: 1px solid; } 

  @if 5 < 3 { border: 2px dotted; } 

  @if null  { border: 3px double; } }

编译为

p {  border: 1px solid; }

@if 声明后面可以跟多个 @else if 声明，或者一个 @else 声明。如果 @if 声明失败，Sass 将逐条执行 @else if 声明，如果全部失败，最后执行 @else 声明，例如：

 $type: monster; p {  @if $type == ocean {    color: blue;  }

 @else if $type == matador {    color: red;  }

 @else if $type == monster {    color: green;  }

 @else {    color: black;  } }

编译为

p {  color: green; }

2. @for

@for 指令可以在限制的范围内重复输出格式，每次按要求（变量的值）对输出结果做出变动。这个指令包含两种格式：@for $var from <start> through <end>，或者 @for $var from <start> to <end>，区别在于 through 与 to 的含义：当使用 through 时，条件范围包含 <start> 与 <end> 的值，而使用 to 时条件范围只包含 <start> 的值不包含 <end> 的值。另外，$var 可以是任何变量，比如 $i；<start> 和 <end> 必须是整数值。

@for $i from 1 through 3 {  .item-#{$i} { width: 2em * $i; } }

编译为

.item-1 {  width: 2em; } .item-2 {  width: 4em; } .item-3 {  width: 6em; }

3. @each

@each 指令的格式是 $var in <list>, $var 可以是任何变量名，比如 $length 或者 $name，而 <list> 是一连串的值，也就是值列表。

@each 将变量 $var 作用于值列表中的每一个项目，然后输出结果

@each $animal in puma, sea-slug, egret, salamander { 

  .#{$animal}-icon{    background-image: url('/images/#{$animal}.png');  } }

编译为

.puma-icon {  background-image: url('/images/puma.png'); } 

.sea-slug-icon {  background-image: url('/images/sea-slug.png'); } 

.egret-icon {  background-image: url('/images/egret.png'); } 

.salamander-icon {  background-image: url('/images/salamander.png'); }