今天完成的事：

一、任务11完成

二、使用sass编写任务12，即重新写任务5/6

sass使用需要注意声明变量的位置，子元素中声明的变量不可用在父元素中，多层嵌套并且都声明了同名不同值的变量时，按就近原则调用变量

所以需要大量使用的变量，比如color，bg-color，display：flex等，可以在body中声明，后续元素直接套用可

在写任务6页面时，想使用一个响应式布局，发现使用@media修改sass的变量，但是无法实现

结论：sass的变量无法通过@media修改，可以重新声明变量的值，然后逐条修改元素，才能实现变量的变化

三、学习了文字溢出省略号的显示

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

四、学习任务12深度思考

学习小课堂资料：编码规范及class命名规范http://lesson.jnshu.com/l/subjectContent/106/?id=&lobtn=2

主要学习了class命名规范：

规则命名中，一律采用小写加中划线的方式，不允许使用大写字母或_

命名避免使用中文拼音，应该采用更简明有语义的英文单词进行组合

不允许通过1、2、3等序号进行命名；避免class与id重名

class用于标识某一个类型的对象，命名必须言简意赅

尽可能提高代码模块的复用，样式尽量用组合的方式

规则名称中不应该包含颜色（red/blue）、定位（left/right）等与具体显示效果相关的信息。应该用意义命名，而不是样式显示结果命名

布局类：header, footer, container, main, content, aside, page, section

包裹类：wrap, inner

区块类：region, block, box

结构类：hd, bd, ft, top, bottom, left, right, middle, col, row, grid, span

列表类：list, item, field

主次类：primary, secondary, sub, minor

状态类：active, current, checked, hover, fail, success, warn, error, on, off

导航类：nav, prev, next, breadcrumb, forward, back, indicator, paging, first, last

交互类：tips, alert, modal, pop, panel, tabs, accordion, slide, scroll, overlay,

分割类：group, seperate, divider

等分类：full, half, third, quarter

表格类：table, tr, td, cell, row

图片类：img, thumbnail, original, album, gallery

论坛类：forum, bbs, topic, post

方向类：up, down, left, right

其他语义类：btn, close, ok, cancel, switch; link, title, info, intro, more, icon; form, label, search, contact, phone, date, email, user; view, loading...

遇到的问题：

暂无

明天计划：

学习任务12深度思考，class命名规范

查看W3C中的JS语法，重点理解变量，函数，对象，作用域，数组，IF ELSE，For 循环的含义，了解Jason格式，做前期的JS准备

回顾前面所有任务的深度思考

有余力的情况下做任务13

收获：

通过不断的编辑代码，以及代码重构，对于sass的理解和应用更加得心应手，嵌套、变量以及@mixin的使用轻车熟路

任务总结：

任务名称：CSS：TASK11

成果链接：代码：https://github.com/JiHPeng/Task/tree/master/t11
                  展示 ：https://jihpeng.github.io/Task/t11/t11.html

任务耗时：2019/05/09-2019/05/10 共2天


官方脑图：



我的脑图：



任务总结：

任务11的要求是使用sass或者less重做任务4

在sass和less之间我选择了sass，因为一方面资料说sass的功能更强大，一方面是bootstrap4也拥有sass变量和@mixin，对于制作页面有相当大的帮助

sass相对于正常css来说，最主要的是可以设置变量，由于变量的存在，代码维护起来会方便很多，但也要慎用变量，不能因为数值一致就使用同一变量，否则维护修改时会出现大量错误

因为sass的代码结构可嵌套，所以相对css来说更加方便阅读

sass的@mixin混合器相当于一个大型的常量，可以带入其他元素内部修改样式，对于大量重复性的样式来说相当方便

@extend 非常容易出错，他会标记一个元素，然后把所有包含元素的样式复制，再把使用@extend的元素替换过去，标记元素的使用频率越高，越容易出错，尤其是在标记元素嵌套的情况下

在重做任务4的过程中，添加了一个新学习的标签——<label>

<label for="id"> 可以链接 #id标签，基本用法就是往里嵌套一个input，点击label元素就等于点击了input