一、sass

1.“CSS预处理器”，让CSS像其它程序语言一样可以做一些预定的处理，为CSS增加一些编程的特性。

2.！default设置默认值，而覆盖则是再其之前再次声明该变量
使用：
例如把padding的值从2px改成5px

$ingStylePadding: 5px;

//导入imgstyle.scss
@import 'imgstyle' ;

编译成css后

img-border {
border： 1px solid  #ccc ;
padding: 5px;
}

这种情况使用默认值，可以让我们在不对.scss源文件进行修改，而对我们要修改的地方进行了修改，同时不会产生重复的代码

3.@mixin可以实现大段样式的重用

4.可以对选择器进行嵌套使用

5.sass的逻辑：如@if、@while、@each、@for

二、移动端的适配

visual viewport 可见视口 屏幕宽度
layout viewport 布局视口 DOM宽度
ideal viewport 理想适口：使布局视口就是可见视口
设备宽度(visual viewport)与DOM宽度(layout viewport), scale的关系为：

（visual viewport）= （layout viewport）* scale
获取屏幕宽度(visual viewport)的尺寸：window. innerWidth/Height。
获取DOM宽度(layout viewport)的尺寸：document. documentElement. clientWidth/Height。

eg.

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 

设置理想视口：把默认的layout viewport的宽度设为移动设备的屏幕宽度，得到理想视口(ideal viewport)
width=device-width 这句代码可以把布局视口设置成为浏览器（屏幕）的宽度
user-scalable=no 禁止用户缩放
initial-scale=1 的意思是初始缩放的比例是1,起到了和width=device-width同样的效果
maximum-scale=1.0, minimum-scale=1.0最大最小的缩放级别

2.媒体查询@media
min-width、max-width对应的属性值就是响应式设计中的断点值
来解决自适问题

3.设配rem
适配原理：将px替换成rem,动态修改html的font-size
1 rem = 浏览器默认的字体大小

4.Flexible布局
相对单位rem基准值公式：
rem=document.documentElement.clientWidth*dpr/10
将视觉稿分成100份，每份被称为一个单位a
1rem被认为10a
Flexible会将实际视口宽度除以10，并将这个值设置为根元素html的font-size值。
由此可以推出：对于采用标准iPhone 6的750×1334视觉稿来说
1a = 7.5px 1rem = 75px
基于这个计算结果，我们就能将1:1标注稿的px数值除以75转换成rem数值，再套用到CSS中。

三、bootstrap

了解bootstrap CSS和bootstrap布局组件
着重看了下列排序、表格表单、网格系统、图像等。
它的实现很简单，在便签上加上类名

四、demo

就是跟着一些实例敲，再看效果没实现的地方、找对应的代码
去实现它，或者看源码（它的原理实现），

进度貌似还是慢了，还会加快脚步的