”本系列教程为实战教程，是本人移动端重构经验及思想的一次总结，也是对sandal及sheral UI的一次全方位剖析，首发在imweb和w3cplus两大站点及“前端Talk”微信公众号，其余所有标注或没有标注来源的均为转载。“
——imweb 结一
sandal是什么
简单来说，sandal是基于sass的一个移动端css的基础库，提供了一些基础的重置，常用的mixin，如flex布局，等分，水平垂直居中，常用图标等，基于它你可以非常方便快速地扩展出你需要的UI组件，其整体结构设计如下图：
_function.scss集成了所有的基础功能，并且不带任何样式，而_core.scss则在function的基础上加入了重置样式，ext文件夹则是三个扩展文件，可根据个人需要自由导入，具体介绍及使用请参考sandal 文档
sheral是什么
sheral是基于sandal扩展的UI组件库，目前包括了btn，dialog，header，card，form，toast，line，media，progress等常用的25 组件。你可以直接调用，也可以根据自己的需求定制你的组件。
所有组件文件均可以在sheral components中查阅，demo效果见sheral UI
sandal与sheral的关系，就如jquery与其插件的关系。所以退一万步说如果sheral的UI真的不合你意，你也可以基于sandal提供的基础功能，快速构建一套你自己的UI库。这也是我把这两个分开开发的原因。
PS：sheral目前只专注重构这块，所以js写得比较简略，只是为了简单演示使用，同时欢迎感兴趣的小伙伴加入重构或转成其他js组件库。
放肆还是克制
理清了这两者关系之后，这里扯出另一个话题，UI库的度在哪里？
如果要适应各种场景，就必然会增加代码量，而各种情况又不一定能全部用上，那冗余的代码必然是个累赘，要是换个人开发那更是不敢动了；而如果太简单，必然又无法发挥一个UI库的作用，所以这必然是一个纠结的问题。
正如《后会无期》中说道：“喜欢就会放肆，但爱是克制”。
为了遵循克制这原则，在组件的头部，我们经常会看见一些带有switch标识的开关组件，有默认会true的，也有为false的，你可以根据你的需要选择开或者关来决定是否生成该样式。
于是在sheral的UI开发中，不仅实现适用多种场合，更是合理有节制的控制了代码的冗余，同时也留有进一步扩展的余地，这才是sheral的态度。
其他说明
- 本系列教程的css3前缀统一由PostCSS 插件autoprefixer处理。
- 如无特别申明，所有的@mixin均定义在sandal的_mixin.scss中。
- 本系列教程主要是分析sheral UI的实现。
- class命名使用什么鬼，又不知道怎么命名class了
