Today

1.each 函数

// SCSS
@each $name, $color in (list, red), (detail, blue) {
    .jdc_#{$name} {
        background-image: url(/img/jdc_#{$name}.png);
        background-color: $color;
    }
}

// CSS
.jdc_list {
    background-image: url(/img/jdc_list.png);
    background-color: red;
}
.jdc_detail {
    background-image: url(/img/jdc_detail.png);
    background-color: blue;
}

#{} 是连接符，变量连接使用时需要依赖

2join

join($list1, $list2, [$separator])：将两个列给连接在一起，变成一个列表

混合宏 VS 继承 VS 占位符

Sass 中的混合宏使用

总结：编译出来的 CSS 清晰告诉了大家，他不会自动合并相同的样式代码，如果在样式文件中调用同一个混合宏，会产生多个对应的样式代码，造成代码的冗余，但是@mixin可以传参数。

如果你的代码块中涉及到变量，建议使用混合宏来创建相同的代码块。

Sass 中继承

总结：使用继承后，编译出来的 CSS 会将使用继承的代码块合并到一起，通过组合选择器的方式向大家展现，比如 .mt, .block, .block span, .header, .header span。这样编译出来的代码相对于混合宏来说要干净的多，但是他不能传变量参数。

如果你的代码块不需要专任何变量参数，而且有一个基类已在文件中存在，那么建议使用 Sass 的继承。

占位符

总结：编译出来的 CSS 代码和使用继承基本上是相同，只是不会在代码中生成占位符 mt 的选择器。那么占位符和继承的主要区别的。

“占位符是独立定义，不调用的时候是不会在 CSS 中产生任何代码；继承是首先有一个基类存在，不管调用与不调用，基类的样式都将会出现在编译出来的 CSS 代码中。

4.background-clip

设置元素的背景（背景图片或颜色）是否延伸到边框下面。如果没有设置背景颜色或图片，那么这个属性只有在边框（border）设置为透明或半透明时才能看到视觉效果

border-box:背景被剪裁到 外边框

padding-box： 背景延伸到内边距框

content-box  背景剪裁到内容区域

5.flex 盒子 align-items 和 align-content 的区别（拿居中举例）

align-items 是 每个 flex 元素在侧轴上的对其方式，他和align-content 有相同的功能，但是 items 是让每一个单行的容器剧中，而不是整个容器

align-content 最大的区别就是使用多行元素 ，并且当侧轴上有多余空间使flex容器内的flex线对齐。 

align-items:                                    align-content

6.侧边栏的制作似乎要用到js ：

js 事件：

事件是指在文档或者浏览器中发生的一些特定交互瞬间，比如打开某一个网页，浏览器加载完成后会触发 load 事件，当鼠标悬浮于某一个元素上时会触发 hover 事件，当鼠标点击某一个元素时会触发 click 事件等等。

事件处理就是当事件被触发后，浏览器响应这个事件的行为，而这个行为所对应的代码即为事件处理程序。

一个简单的click 事件

1. <button id="btn">click</button>
2. <script type="text/javascript">
3. var btn = document.getElementById("btn");
4. btn.onclick=function(){
5. alert("hello world");
6. }
7. </script>
8. 
   

   <script type="text/javascript">

   var btn = document.getElementById("btn");

   btn.onclick=function(){

   alert("hello world");

   }

   </script>

• keydown：键盘的键被按下
• keypress：紧接着keydown事件触发
• keyup：按键被释放
• 
  
• 它们都是有关键盘的事件。keydown、keypress事件触发在文字还没敲进文本框，这时如果在keydown、keypress事件中输出文本框中的文本，得到的是触发键盘事件前的文本，而keyup事件触发时整个键盘事件的操作已经完成，获得的是触发键盘事件后的文本

任务的整体架构 方式：

在reset 中重置 一些 浏览器默认样式 ，

在components 中包含一些小的组件 ，比如一些三角形

layout 放置整个页面的布局

utils 放置 一些 mixin placeholder 和一些 变量 ，map 之类

最后在main 中方主页面 导入 各个 部件 ，导入时注意路径的书写方式 ，相对路径 的正确书写

Tomorrow

1.继续任务13  

学习 制作侧边栏 效果

Gain

1.sass 嵌套 尽量避免 过多选择器嵌套

2.flex 布局的一些细节

3.复习 任务 7遇到的一些陌生元素

4.js 开始学习

Pain

1.a 包围整个 div 使得点击这个div块 都能链接，但浏览器解析出来 的结果是a 在遇到 div 开始标签前就添加 a的结束标签了。

 解决方案： a的display：block  

关于a 标签包含块级元素 ，https://www.zhihu.com/question/34952563

并不能看懂。。

2. 侧边栏 效果 实现 还没找到解决方案