今天完成：

1、 安装ruby和sass，了解sass基本语法

2、 修改任务八

明天计划：

1、 继续修改任务八

2、开始做任务十一

遇到的问题：

1、<li>带标签样式居中

       Flex-basis属性

2、 transform旋转至视线水平时总是在视觉消失一段时间

原因：设置了backface-visibility:hidden属性，翻转至背面时，隐藏不可见，需要旋转时，应当将该属性修改为visible,旋转全程可见。

收获：

主要是关于sass部分

Sass是一个将脚本解析成CSS的脚本语言，即SassScript。使用和CSS一样的块语法，即使用大括号将不同的规则分开，使用分号将具体的样式分开。

1、sass提供了一个特殊结构&。

在使用嵌套规则时，父选择器能对于嵌套规则如何解开提供更好的控制。

3、 使用嵌套属性可以避免重写CSS多次。在正常的CSS中，需要每次使用命名空间来编写这些属性。使用SASS，可以通过仅写入命名空间一次来嵌套属性。

4、 SASS使用 class 或 id 选择器支持占位符选择器。 在正常CSS中，这些用“＃”或“.”指定，但在SASS中，它们替换为“％”。 要使用占位符选择器，可以使用 @extend 指令。 如果不使用 @extend 指令，则无法在CSS中显示结果.

5、 SASS允许诸如加法，减法，乘法和除法的数学运算。不能使用不兼容的单位，如px * px或添加数字与px和em导致生成无效的CSS。因此，如果在CSS中使用无效单位，SASS将显示错误。 SASS支持关系运算符，如<，>，<=，> =和等于运算符= =，！=。

6、@if指令接受SassScript表达式，并且只要表达式的结果为false或null以外的任何结果，就使用嵌套样式。

7、@each $var in <list or map>

下面简要解释语法。

·        $var: 它表示变量的名称。 @each规则将$var设置到列表中的每个项目，并使用值$var输出样式。

·        <list or map>: 这些是SassScript表达式，将返回列表或映射。

 @for $var from <start> through <end>

@for指令使用关键字，通过它指定范围，包括<start>和<end>的值。

@for $var from <start> to <end>

@for指令使用关键字，指定从<start>值到<end>值之前的值的范围。

to时小于end，through是小于等于

8、@mixin 指令用于定义mixin，它可选地包括mixin名称后面的变量和参数。

比如代码：

@mixin style {

.cont{

       color: #77C1EF;

    }

}

@include style;

@include 指令用于在文档中包含mixin。将使用mixin的名称，并将可选参数传递给它。由mixin定义的样式可以包含在当前规则中。

9、flex布局内还可设置flex布局，相当灵活。

比如代码

.father{

    display: flex;

    justify-content: space-between;

    align-items: center;

    flex-wrap:wrap;

}

.sonl{

    display: flex;

    justify-content: center;

    align-items: center;

    flex-basis: 20%;

}