今天继续做了任务14，使用scss，做的过程中出了轮播图和checkbox之外，遇到的都是些细节性的问题，基本都已解决，继续学习了sass方面的知识：

1 向混合样式中导入内容 (Passing Content Blocks to a Mixin)

在引用混合样式的时候，可以先将一段代码导入到混合指令中，然后再输出混合样式，额外导入的部分将出现在 @content 标志的地方：

@mixin apply-to-ie6-only {
  * html {
    @content;
  }
}
@include apply-to-ie6-only {
  #logo {
    background-image: url(/logo.gif);
  }
}

编译为

* html #logo {
  background-image: url(/logo.gif);
}

为便于书写，@mixin 可以用 = 表示，而 @include 可以用 + 表示，所以上面的例子可以写成：

=apply-to-ie6-only
  * html
    @content

+apply-to-ie6-only
  #logo
    background-image: url(/logo.gif)

注意： 当 @content 在指令中出现过多次或者出现在循环中时，额外的代码将被导入到每一个地方。

7.2. @media

Sass 中 @media 指令与 CSS 中用法一样，只是增加了一点额外的功能：允许其在 CSS 规则中嵌套。如果 @media 嵌套在 CSS 规则内，编译时，@media 将被编译到文件的最外层，包含嵌套的父选择器。这个功能让 @media 用起来更方便，不需要重复使用选择器，也不会打乱 CSS 的书写流程。

.sidebar {
  width: 300px;
  @media screen and (orientation: landscape) {
    width: 500px;
  }
}

编译为

.sidebar {
  width: 300px; }
  @media screen and (orientation: landscape) {
    .sidebar {
      width: 500px; } }

@media 的 queries 允许互相嵌套使用，编译时，Sass 自动添加 and

@media screen {
  .sidebar {
    @media (orientation: landscape) {
      width: 500px;
    }
  }
}

编译为

@media screen and (orientation: landscape) {
  .sidebar {
    width: 500px; } }

@media 甚至可以使用 SassScript（比如变量，函数，以及运算符）代替条件的名称或者值：

$media: screen;
$feature: -webkit-min-device-pixel-ratio;
$value: 1.5;

@media #{$media} and ($feature: $value) {
  .sidebar {
    width: 500px;
  }
}

编译为

@media screen and (-webkit-min-device-pixel-ratio: 1.5) {
  .sidebar {
    width: 500px; } }

今天看到任务要求是要写自己的组件库，有点蒙。我做任务前没仔细看，所以没写组件库，对于组件库的概念也比较模糊，网上看了下，也没看懂：

什么是组件？

组件

它的核心意义在于代码复用。功能相对单一或者独立，在整个系统的代码层次上位于最底层，被其他代码所依赖。

模块

它的核心意义在于分离职责。它的关注点在于功能划分。 例如： 视频通话、语音通话等功能就可以被分为不同的模块

为什么要做组件库

传统开发方式效率低以及维护成本高的主要原因在于很多时候是将一个系统做成了整块应用，而且往往随着业务的增长或者变更，系统的复杂度会呈现指数级的增长，经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改，造成牵一发而动全身。

针对此弊端，其实业界早就有了一些探索，我们希望一个大且复杂的场景能够被分解成几个小的部分，这些小的部分彼此之间互不干扰，可以单独开发，单独维护，而且他们之间可以随意的进行组合。就拿电脑主机来说，一台整机包括CPU，主板，内存，硬盘等等，而这些部件其实都是由不同的公司进行生产的，他们彼此之间根据一套标准分别生产，最后组装在一起。当某个部件出现问题时，不需要将整台主机都进行维修，只需要将坏的部件拿下来，维修之后再将其组合上就可以了。这种化繁为简的思想在后端开发中的体现是微服务，而在前端开发中的体现就是组件化。

组件化的意义

为前端提供了很好的分治策略，可以实现独立维护，可维护性强

组件具有独立性，组件之间可以自由组合

页面只不过是组件的容器，负责组合组件即可形成功能完整的界面

组件开发的原则

标准性

任何一个组件都应该遵守一套标准，可以使得不同区域的开发人员据此标准开发出一套标准统一的组件。

组合性

组件之前应该是可以组合的。我们知道前端页面的展示都是一些HTML DOM的组合，而组件在最终形态上也可以理解为一个个的HTML片段。那么组成一个完整的界面展示，肯定是要依赖不同组件之间的组合，嵌套以及通信。

重用性

任何一个组件应该都是一个可以独立的个体，可以使其应用在不同的场景中。

可维护性

任何一个组件应该都具有一套自己的完整的稳定的功能，仅包含自身的，与其它组件无关的逻辑，使其更加的容易理解，使其更加的容易理解，同时大大减少发生bug的几率。

组件化的方法

我们把一个组件保存为一个文件夹，把相应的HTML, CSS, JS 文件都放在一起。在需要用的时候再引用相应的文档就可以了。

编码实战

十等分的栅格系统

body{

  margin: 0;

  padding: 0;

}

.myrow{

  margin:0 -15px;

  &::after{

    content: "";

    display: block;

    clear: both;

  }

}

.mycol-sm-1,

.mycol-sm-2,

.mycol-sm-3,

.mycol-sm-4,

.mycol-sm-5,

.mycol-sm-6,

.mycol-sm-7,

.mycol-sm-8,

.mycol-sm-9,

.mycol-sm-10{

  float: left;

  padding: 0 15px;

  box-sizing: border-box;

}

.mycol-sm-1{

  width: 10%;

}

.mycol-sm-2{

  width: 20%;

}

.mycol-sm-3{

  width: 30%;

}

.mycol-sm-4{

  width: 40%;

}

.mycol-sm-5{

  width: 50%;

}

.mycol-sm-6{

  width: 60%;

}

.mycol-sm-7{

  width: 70%;

}

.mycol-sm-8{

  width: 80%;

}

.mycol-sm-9{

  width: 90%;

}

.mycol-sm-10{

  width: 100%;

}

明日目标：

完成任务14

遇到的问题：

轮播图和checkbox还没搞懂

收获：

对sass理解加深了