今天完成：

看了任务13的要求， 觉得自己之前的任务对于sass预处理器的运用还不够娴熟，所以再次学习了，印象比较深的就是@import了，其余的知识点也大概了解了，但是暂时还用不到，所以就在这个任务里深入的学习下这个属性吧。

css里的@import不是很常用，因为浏览器只有加载到@import规则是才会加载css文件，这样就导致了整个页面的加载速度。而sass中的@import规则与css不同的是，sass中的@import 规则会在生成css文件时，把相关的文件导入合并成一个文件，而无需浏览器去下载其他的文件。另外在被导入文件中定义的变量等也可以在导入文件中正常使用。

‍

在使用@import ‍‍导入sass文件时，可以省略sass文件的后缀名‍‍.sass或.scss，例如：‍‍‍‍

- a.scss
    body {        background-color: #f00;
    }- style.scss
    @import "a";    div {        color: #333;
    }

‍‍编译后的style.css 文件内容如下:‍‍

body {    background-color: #f00;
}div {    color: #333;
}

‍‍如果你是编译整个sass目录的话，会发现一个问题，在生成style.css 的同时也生成了一个a.css ，这个结果并不是我们想要的，a.scss 作为一个中间文件，一般情况下是不需要在生成css的。sass开发者也考虑到了这点，我们只需要在文件名前加上下划线_ ，sass编译的时候就会忽略这个文件，@import 引用的时候可以加下划线引用，也可以不加。还是上面的例子，我们可以进行修改：‍‍

- _a.scss
    body {        background-color: #f00;
    }- style.scss
    @import "a";    div {        color: #333;
    }

‍‍这样一来就只会生成style.css 文件，不会再生成多余的a.css 了。使用这个引用的规则应该就可以差分出不同的组件了，‍

明天计划：

按照头部，中部 ，尾部的顺序拆分任务13，设置全局的样式和局部的样式分别写入不同的scss文件，并引入同一个样式表。继续学习相关知识。

遇到困难：

如果每个把部分都拆分出可以复用的组件后，那么全局的结构样式该怎么设置呢，直接把各个模块摞在一起不久可以了吗。想法有点不成熟，可能是今天没有写代码的原因吧，明天直接上手。

收获：了解了@import的使用方法。bem的命名规则，就是保证每一个类名的唯一性，而且足够语义化。