Today 

1.sass map使用

sass 版本 在3.3以上 。sass -v 确认sass版本

bs 中三组 按钮为例子 btn-default btn-primary btn-danger 

定义按钮不同状态设定：

$btn-config:(
	default:(
		class: 'default',
		color: #333,
		bg: #fff,
		border-color: #ccc
	),
	primary:(
		class: 'primary',
		color: #fff,
		bg: $brand-primary,
		border-color: darken($brand-primary, 0)
	),
	danger:(
		class: 'danger',
		color: #fff,
		bg: $brand-danger,
		border-color: darken($brand-danger, 0)
	)
);

通过 each 吧 btn-config设定一下 ：

@each $name, $value in $btn-config {
$class: map-get($value, class); // 用map-get取出各個設定值
$color: map-get($value, color);
$bg: map-get($value, bg);
$border-color: map-get($value, border-color);
// 接下來將變數加到class內就完成了
.btn-#{$class}{
color: $color;
background-color: $bg;
border-color: $border-color;
&:hover{
background-color: darken($bg, 5%);
border-color: darken($border-color, 5%);
}
}
}

sass数组 的nth  和css 的nth 一样都是从1 开始

2.overflow  

overflow-x 和 overflow-y 是定义xy轴溢出 的剪切方式

初始值: visible； hidden scroll auto

auto 和 scroll 的区别在 auto 是由浏览器 定夺  内容超出后 出现滚动条

应用于: 块级元素、替换元素、表单元格

继承性: 无

3.calc

使用 calc() 可以很容易的为一个对象设置一个左右两边相等的外边距.

calc() 的另外一个用例是用来确保一个表单域的大小适合当前的可用空间,而不会在保持合适的外边距的同时,因挤压超出其容器的边缘.

任何长度值都可以使用calc()函数进行计算； 
（1）calc()函数支持 “+”, “-“, “*”, “/” 运算； 
（2）calc()函数使用标准的数学运算优先级规则； 
（3）但需要注意的是 + - 必须用空格隔开;

4.jason 格式

是js 对象语法 的子集

jason 对象 

{ "firstName":"John" , "lastName":"Doe" }

Tomorrow

1.任务13

13中 页面内容增加，更加有必要分类管理各个部件。比如音频文件放入 componets 文件

如果有外部导入 比如 bs  jquery  等，可以创建vendors 文件夹 表示第三方

verdors-extensions 来放外部引入的库或者小部件

2.学习 less

3.继续学习sass  

Gain

1.关于sass代码的规范 ：https://guide.aotu.io/docs/css/sass.html

2.关于 overflow  的 注意事项

Pain

1.在mixin 里嵌套 mixin  ，编译不出错，效果也有，但这么写是否规范

2.overflow 没有效果 

解决 ： 设置高度 设置 body 高度 为100vh

mdn :为使 overflow 有效果，块级容器必须有一个指定的高度（height或者max-height）或者将white-space设置为nowrap。

mdn :使用 overflow 默认值（visible）以外的值将创建一个新的 块级格式化上下文. 这在技术层面上是必须的——如果一个浮动元素和滚动条相交，它会强制（重新）包围内容元素。这种行为（重新包围内容元素）会在每一次移动滚动条之后发生，会使得滚动体验变差（慢）。

这句话 不理解，具体卡顿的现象是啥？

然后看到了这个 https://www.zhangxinxu.com/wordpress/2015/01/css-page-scrollbar-toggle-center-no-jumping/ ：

解决方案是

.wrap-outer {
    margin-left: calc(100vw - 100%);
}

或者

.wrap-outer {
    padding-left: calc(100vw - 100%);
}

.wrap-outer 指的是这个居中 页面的父级 

100vw相对于浏览器的window.innerWidth，是浏览器的内部宽度,滚动条宽度也计算在内,而100%是可用宽度，是不含滚动条的宽度。所以上面 代码的计算结果就是 滚动条的宽度

但是这个方法 对于窄屏有瑕疵，终极解法是：

html {
  overflow-y: scroll;
}

:root {
  overflow-y: auto;
  overflow-x: hidden;
}

:root body {
  position: absolute;
}

body {
  width: 100vw;
  overflow: hidden;
}