”本系列教程为实战教程，是本人移动端重构经验及思想的一次总结，也是对 sandal [https://github.com/marvin1023/sandal] 及 sheral UI [https://github.com/imweb/sheral] 的一次全方位剖析，首发在 imweb [imweb.io] 和 w3cplus [http://w3cplus.com] 两大站点及“前端Talk”微信公众号，其余所有标注或没有标注来源的均为转载。“<br>——imweb 结一<br>SANDAL是什么<br>简单来说， sandal [https://github.com/marvin1023/sandal]<br>是基于sass的一个移动端css的基础库，提供了一些基础的重置，常用的mixin，如flex布局，等分，水平垂直居中，常用图标等，基于它你可以非常方便快速地扩展出你需要的UI组件，其整体结构设计如下图：<br>sandal [http://imweb-io-1251594266.file.myqcloud.com/Fo_FAyG7ErQn1aJNiagpV98JhYp0]

”本系列教程为实战教程，是本人移动端重构经验及思想的一次总结，也是对 sandal [https://github.com/marvin1023/sandal] 及 sheral UI [https://github.com/imweb/sheral] 的一次全方位剖析，首发在 imweb [imweb.io] 和 w3cplus [http://w3cplus.com] 两大站点及“前端Talk”微信公众号，其余所有标注或没有标注来源的均为转载。“<br>——imweb 结一<br>距离上个 移动端重构系列 [http://www.w3cplus.com/blog/tags/429.html] 已是两年了（不得不感叹时间是把杀猪刀）。这次将会带来实战系列，将欠下两年的债现在还上，给七年的重构赋予一次新生。<br>既然是新的开始，先简单说下这个系列要用到的一些技术吧。同时也是对移动端重构一些技术的一个简单回顾。<br>VIEWPORT<br>关于viewport详细请参考 移动前端开发之viewport的深入理解 [http://www.cnblogs.com/2050/p/3877280.html]

”本系列教程为实战教程，是本人移动端重构经验及思想的一次总结，也是对 sandal [https://github.com/marvin1023/sandal] 及 sheral UI [https://github.com/imweb/sheral] 的一次全方位剖析，首发在 imweb [imweb.io] 和 w3cplus [http://w3cplus.com] 两大站点及“前端Talk”微信公众号，其余所有标注或没有标注来源的均为转载。“<br>——imweb 结一<br>这个line list的名字是我自己起的（大概的意思是单行列表），要实现的东西为 sheral [https://github.com/imweb/sheral] 的 line list [http://imweb.github.io/sheral/line.html] ，对应的scss组件为 _line-list.scss ，下图为line-list的一个缩影：

”本系列教程为实战教程，是本人移动端重构经验及思想的一次总结，也是对 sandal [https://github.com/marvin1023/sandal] 及 sheral UI [https://github.com/imweb/sheral] 的一次全方位剖析，首发在 imweb [imweb.io] 和 w3cplus [http://w3cplus.com] 两大站点及“前端Talk”微信公众号，其余所有标注或没有标注来源的均为转载。“<br>——imweb 结一<br>单行，不考虑间距等分<br>以sheral的 nav list [http://imweb.github.io/sheral/nav.html] 为例：<br>.nav-list{<br> @include equal-flex(nav-item);<br>}<br>equal-flex的mixin定义在 sandal [https://github.com/marvin1023/sandal] 中，代码如下：<br>// flex等分@mixin equal-flex($child: 'li') {display: flex;

”本系列教程为实战教程，是本人移动端重构经验及思想的一次总结，也是对 sandal [https://github.com/marvin1023/sandal] 及 sheral UI [https://github.com/imweb/sheral] 的一次全方位剖析，首发在 imweb [imweb.io] 和 w3cplus [http://w3cplus.com] 两大站点及“前端Talk”微信公众号，其余所有标注或没有标注来源的均为转载。“<br>——imweb 结一<br>进入离开动画<br>在sandal的 _animation.scss 中我们定义了fade-in/out, shrink-in/out, up-in/out, down-in/out, left-in/out,<br>right-in/out六组基础动画，下面我们以fade-in/out为例说明如何使用：<br>直接调用mixin：<br>@include animation-fade-in;@include animation-fade-out;<br>编译出的css为：<br>.fade-in, .fade-out{

”本系列教程为实战教程，是本人移动端重构经验及思想的一次总结，也是对 sandal [https://github.com/marvin1023/sandal] 及 sheral UI [https://github.com/imweb/sheral] 的一次全方位剖析，首发在 imweb [imweb.io] 和 w3cplus [http://w3cplus.com] 两大站点及“前端Talk”微信公众号，其余所有标注或没有标注来源的均为转载。“<br>——imweb 结一<br>FORM<br>大概要实现的效果如下图（具体demo可见 sheral form [http://imweb.github.io/sheral/form.html] ）：<br>form [http://imweb-io-1251594266.file.myqcloud.com/FgfXEhbLNOdsA0kENWg4a7uGT6jz]<br>粗略一看，跟line list差不多，好像可以直接套用，但是深究起来还是有那么些不同的，大概有以下几点用户体验差别：<br> * 输入框可点击范围<br> * 右边的箭头可点击范围<br>line

”本系列教程为实战教程，是本人移动端重构经验及思想的一次总结，也是对 sandal [https://github.com/marvin1023/sandal] 及 sheral UI [https://github.com/imweb/sheral] 的一次全方位剖析，首发在 imweb [imweb.io] 和 w3cplus [http://w3cplus.com] 两大站点及“前端Talk”微信公众号，其余所有标注或没有标注来源的均为转载。“ ——imweb 结一 本篇主要从icon及图片说下移动端重构碰到的一些问题及实践方法。 ICON 对于icon的问题多数都集中在颜色和大小上，所以 sheral [https://github.com/imweb/sheral] 采用了svg icon和css绘制的icon，关于svg icon网上已经有很多文章了，所以这里主要介绍绘制icon的一些技巧，如下以搜索图标为例： // icon search.icon-search { position: relative; &::before {

”本系列教程为实战教程，是本人移动端重构经验及思想的一次总结，也是对 sandal [https://github.com/marvin1023/sandal] 及 sheral UI [https://github.com/imweb/sheral] 的一次全方位剖析，首发在 imweb [imweb.io] 和 w3cplus [http://w3cplus.com] 两大站点及“前端Talk”微信公众号，其余所有标注或没有标注来源的均为转载。“<br>——imweb 结一<br>圆形进度条<br>具体demo效果可见： sheral progress [http://imweb.github.io/sheral/progress.html]<br>这里主要分析下圆环的实现，蓝色的进度条圆环由左右两边构成，这里以右半边的为例，html结构为 .circle-right > .right-inner (为了视觉效果，把蓝色放在里面了，而非覆盖在灰色上)，如下图：