发表于: 2018-10-28 21:39:39

1 753


今天完成的事情:

任务五的重写

.vote{
 background-image: url(../../img/task5.15.png);
 height: ($five * 8);
 background-repeat: no-repeat;
 background-size: 101% 100%;
 display: flex;
 align-items: center;
 .ink{
   flex-direction: column;
   margin-left: ($five / 2);
 }
 .woman{
   width: ($five * 2.5);
   height: ($five * 2.5);
   margin-left: ($five / 2);
 }
 .name{
   color: $three;
   font-size: ($five / 1.33);
 }
 .icon{
   flex-wrap: wrap;
 }
}

任务六绝大部分的重写

.consult{
 width: 100%;
 height: ($five * 1.5);
 background: $one;
 @include layout;
 .look{
   margin-left: ($five / 2.22);
   @include layout;
 }
 .employer{
   width: ($five * 5);
   height: ($five * 1.25);
   line-height: ($five * 1.125);
   font-size: 1.5rem;
   border-radius: ($five / 5);
   text-align: center;
   color: $three;
   background: $one;
 }


明天计划的事情:明天计划提交任务十二,开始任务十三


遇到的问题:今天开始重写任务六的时候不是很理解,如何把fiex写进sass的变量里,看了教程感觉还是没什么头绪,就请教了师兄,经过师兄的指导解决了。


收获:
为了有效的维护和开发项目,代码的重复利用就显得尤为重要。在Sass中,除了@import@extend可以使你的代码更加具有重复利用性,@mixin指令也同样能提高你代码的重复使用率并简化你的代码。@extend指令通过继承从而简化了代码,但是它也有缺陷之处,首先是不够灵活,其次它还会将你不需要的其他地方具有相同类名的样式都继承过来。@mixin指令是另一种简化代码的方法。Mixins可以包含任意内容且可以传递参数,因此比'@extend'更加灵活和强大。


返回列表 返回列表
评论

    分享到