今天完成的事情：任务 八九修复的差不多了，开始学习sass。

明天计划的事情：开始用sass写任务十一。 

遇到的问题：任务十发现几个小bug ，

       1、页面缩小时有滚动条，看了一遍代码没找到问题所在，清理浏览器缓存后正常。

       2、缩到最小时会变丑，，可以通过响应式解决，不过杨师兄让做成四行的样式，可以试试。

收获：

命名空间

有时候，你可能为了更好组织CSS或者单纯是为了更好的封装，将一些变量或者混合模块打包起来, 你可以像下面这样在#bundle中定义一些属性集之后可以重复使用:

#bundle {  .button () {    display: block;    border: 1px solid black;    background-color: grey;    &:hover { background-color: white }  }  .tab { ... }  .citation { ... } }

你只需要在 #header a中像这样引入 .button:

#header a {  color: orange;  #bundle > .button; }

作用域

LESS 中的作用域跟其他编程语言非常类似，首先会从本地查找变量或者混合模块，如果没找到的话会去父级作用域中查找，直到找到为止.

@var: red;#page {  @var: white;  #header {    color: @var; // white  } }#footer {  color: @var; // red  }

注释

CSS 形式的注释在 LESS 中是依然保留的:

/* Hello, I'm a CSS-style comment */.class { color: black }

LESS 同样也支持双斜线的注释, 但是编译成 CSS 的时候自动过滤掉:

// Hi, I'm a silent comment, I won't show up in your CSS.class { color: white }

Importing

你可以在main文件中通过下面的形势引入 .less 文件, .less 后缀可带可不带:

@import "lib.less";@import "lib";

如果你想导入一个CSS文件而且不想LESS对它进行处理，只需要使用.css后缀就可以:

@import "lib.css";

这样LESS就会跳过它不去处理它.

字符串插值

变量可以用类似ruby和php的方式嵌入到字符串中，像@{name}这样的结构:

@base-url: "http://assets.fnord.com";background-image: url("@{base-url}/images/bg.png");

避免编译

有时候我们需要输出一些不正确的CSS语法或者使用一些 LESS不认识的专有语法.

要输出这样的值我们可以在字符串前加上一个 ~, 例如:

.class {  filter: ~"ms:alwaysHasItsOwnSyntax.For.Stuff()"; }

我们可以将要避免编译的值用 “”包含起来，输出结果为:

.class {  filter: ms:alwaysHasItsOwnSyntax.For.Stuff(); }

任务名称：CSS=TASK8

成果链接：https://z1994.github.io/daku/

任务耗时：2018.6.1-2018.6.8

任务总结：1、栅格布局用好了写代码很爽，用的不好简直噩梦，我属于后者，最大的原因就是我刚开始居然三四混用，搞的乱七八糟总是会有冲突，而且很多代码都涉及到js，看不懂的情况下只能一个个的去删。

                  2、响应式刚开始觉得很难，但是知道基本原理并有一些熟练度后还是比较简单的。

                  3、别梦游了，多撸代码。