移动端重构实战系列0——sandal 和 sheral

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的态度。

更多sandal 和 sheral的详细介绍请参考sheral——一个方便定制及扩展的UI组件库

其他说明

• 本系列教程的css3前缀统一由PostCSS 插件autoprefixer处理。
• 如无特别申明，所有的@mixin均定义在sandal的_mixin.scss中。
• 本系列教程主要是分析sheral UI的实现。
• class命名使用什么鬼，又不知道怎么命名class了