Hybrid前端框架开发日志#4-细节优化

又是过了十来天，在旅游与回家的路上匆匆度过，因为没有客观的空闲让我安静的写作，所以只能在闲暇时间完成了相关细节的优化。首先，在实际测试中，响应式排版的18个expand column在浏览器中显得过于多了，所以在一番思付后将其修改为了16个。其次，由于颜色管理模块与layer模块的mixin在实际应用中需要反复引用，并且经过测试，输出的css会重复将引入的scss编译进来，导致代码量无意义的增加，所以将layer与颜色模块的mixin单独呈现了出来供之后的编写调用，并且将文字的颜色也引入了颜色管理系统。最后，经过对弹性框模型的详细学习，将信息提示模块进行了最后一步的完善，使其能够进行动态响应并且有了良好的视觉效果。

.message-box{
  height           : 55px;
  overflow-x       : hidden;
  overflow-y       : hidden;
  text-overflow    : ellipsis;
  color            : $Color-Grey-500;
  background-color : $Color-Grey-900;
  padding          : 10px 15px 10px 15px;
  border-radius    : 0.5em;
  border           : 3px solid $Color-Grey-600;
  margin           : 0;
  @media (max-width : 767px) {
    position      : inherit;
    top           : 0;
    margin        : 0;
    border-radius : 0;
    border        : none;
    display       : flex;
  }
  @include box-shadow-layer-6;
  .message-box-avatar{
    width            : 55px;
    height           : 55px;
    border-radius    : 0.5em;
    padding          : 0;
    margin           : 0;
    float            : left;
    -moz-box-flex    : 1.0;
    -webkit-box-flex : 1.0;
    img{
      width         : 55px;
      height        : 55px;
      border-radius : 0.5em;
    }
  }
  .message-box-content{
    font-size     : small;
    height        : 55px;
    overflow-x    : inherit;
    overflow-y    : scroll;
    text-overflow : ellipsis;
    z-index       : inherit;
    padding       : 0;
    border        : 0;
    margin        : 0 0 0 10px;
    float         : left;
    @media (max-width : 767px) {
      -moz-box-flex    : 4.418182;
      -webkit-box-flex : 4.418182;
      max-width        : 691px;
    }
    @media (min-width : 768px) {
      font-size        : x-small;
      -moz-box-flex    : 2.709091;
      -webkit-box-flex : 2.709091;
      max-width        : 149px;
    }
    @media (min-width : 992px) {
      -moz-box-flex    : 4.363636;
      -webkit-box-flex : 4.363636;
      max-width        : 224px;
    }
    @media (min-width : 2500px) {
      -moz-box-flex    : 5.072727;
      -webkit-box-flex : 5.072727;
      max-width        : 279px;
    }
  }
  .bright-theme{
    color            : $Color-Grey-500;
    background-color : $Color-White;
  }
  ::-webkit-scrollbar{
    display : none;
  }
}