今天完成的事情：

学习SASS。

了解sass的变量

SASS的嵌套

.scss与.sass的区别

安装ruby

明天计划的事情：

完成任务11.

遇到的问题： 

html中不能引用sass文件

收获：

sass使用一种编程语言为CSS增加一些编程特性，将CSS作为目标生成文件。然后开发者就只要使用这种语言作为编码的工作。CSS预处理器用了一种编程的语言进行外部页面样式的设计，然后再编译成为正常的CSS文件，以供于HTML使用。CSS预处理器为CSS增加了一些编程的特性，也不用太考虑浏览器的兼容性。

SASS（变量）→ CSS （引用）→ HTML

html中引用的是CSS文件而不是sass文件。

因为浏览器不认识SASS文件。

需要SASS的编译。

scss和sass的区别。

文件后缀不同：sass以.sass为扩展名 scss以.scss为扩展名

语法书写不同： sass以严格缩进进行缩写，scss写法类似于css

sass书写方法

$变量名：变量值

border: 1px solid #e8e8e8;

border: 1px solid #333333;

SASS

$border: 1px solid 

border:$border #e8e8e8;

border:$border #333333;

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

属性也可以嵌套。比如：p{ border: {color: red; } }

变量如果需要镶嵌在字符串中，就必须需要写在#{}之中。

比如：border-#{$side}-radius: 1rem;

sass共有两种注释风格：

/* */这种会保留到编译后的文件

//comment 这种只保留在SASS源文件中，编译后被省略。

/*!  */ 重要注释

SASS允许在代码中使用算式：

body {margin:(14px/2); }

SASS允许一个选择器，继承另一个选择器。使用@extend+类名 （eg:@extend .class1;）

用@mixin命令，定义一个代码块。

@mixin left {float: left; margin: 1rem; }

然后用div{ @include left; }使用

进度：task10

任务开始时间：2018.6.1

预计结束时间：2018.6.2

是否有延期风险：无

禅道：http://task.jnshu.com/zentao/project-task-687.html