TOBE——引领重构变革

特别声明:小站对部分原创文章已开启付费阅读,并开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

到现在,我们有了sass的入门教程sassGuide,有了sass的进阶教程sass揭秘系列,也有了sass的一个库sassCore,也许你会猜测这应该结束了,不然还能折腾个什么呢?而真相是其实它们都是为tobe的出现而铺垫,正是因为有了tobe这个目标,所以才产生了一系列前面那些文章,为此我大概奋战了3个月,今天终将给这个疯魔状态画个句号,揭晓答案。

直击官网

Tobe是一个写给面向熟悉sass人员开发使用的框架,以sassCore为核心,所有的组件都单独开发,采用一对多模式,在提高效率的同时还能拥有简洁的优良代码。由于有着sass的优良基因,tobe的代码更加灵活可控,做到了想使用什么就调用什么,不浪费不冗余。如果你是一个有着代码洁癖且追求效率的人,那么tobe的精彩一定不可错过。

组件式开发

组件式开发,这个大家都知道的。如果你实在不知道,就把它当做跟jquery一样,按照功能有不同的插件,你需要什么功能,就调用什么插件来完成。

css实现组件式开发,最大的障碍就是css的@import导入文件不能合并在一个文件里面,而是作为独立的文件存在的。而sass提供了这个功能,导入的sass文件,最后解析成一个css文件,这就为组件式开发提供了基础。

其次要做到组件式开发,必须得有个基础的库作为核心。就如jquery的插件是因为有jquery这个核心支撑一样,tobe的核心就是sassCore。sassCore提供了reset,浏览器兼容处理,网格布局,基础@mixin和%,css3前缀,media-queries,再加上文字排版和一些简易的btn,table和form等功能。有了如此核心,组件开发起来简直迅猛无比。

下面这张图,能很好的说明tobe的核心及组件:

一对多模式

何谓一对多模式,这个可能以前没太有说起过的,是我突然想到的,也许前人已经用过了,不过在重构界应该还是第一次吧。先不管是不是第一次了,反正就是用来赋予重构第二次生命的。说一对多之前,我们先来下bootstrap这个经典框架吧。

拿bootstrap来说,其实大概分为三种用法:

第一种人,不管三七二十一直接下载所有的css样式,那么结果是一坨样式在哪里,你需要的你不需要的都有,然后如果要修改点什么东西,就得纠结了,我是修改它默认的样式呢,还是覆写呢?修改默认的吧,以后升级咋办,覆写吧,好像样式好多啊。

那么第二种人呢,他会使用bootstrap的自定义下载,先配置下自己需要的,然后下载得到的样式就是自己配置的那些,走出这一步的人比直接下载的有点优势,不过也仅是一点,还不够。说实话,你这种去配置下,然后下载样式,如果需求变动呢?你再去重新配置下,再下载一份样式,再变呢?估计这个时候得疯了。不过幸好这种情况一般不会发生,要是真发生那就悲催了,还不如第一种算了,在这种情况下哪讲究那么多。

最后第三种人呢,就直接上less,本来bootstrap就是用less写的,直接用less控制起来比上面两个情况总会好多了。上面的变量啊,导入哪个less文件啊,都可以做到自我控制。这看起来很爽很牛逼哄哄吧。别急,因为你这个是用less写的,不是sass,这里有个less的局限性,待会下面给你分析。

上面所有的三种,其实都是一对一模式,就是一个项目一份bootstrap样式。举例说就是如果有A和B两个项目,都是用bootstrap做,那么你A里面要有bootstrap,B里面也得有bootstrap。除非你把那份包含所有样式的css文件,放在线上作为绝对地址引入,那么你做到的才是一对多,在A里面引入线上绝对地址,B里面也是引入线上绝对地址。但是这么一来就走入了我们以前css的路子了, 兜了一圈又回到改革前,不科学,冗余代码一大片,而且后来要覆写的代码估计也是一大片。

说完上面的一对一模式,我们转入一对多模式。简单来说tobe的一对多模式就是把tobe放在某个目录,然后A项目使用的时候通过@import调用,B项目使用的时候也是通过@import调用。相当于这个tobe就是一个基础的东西,但是这个基础的东西远比纯css的做得多,而且还是包含了各大组件的。请看下图:

当然并不是所有的预编译器都可以支持一对多这个模式,它得具备以下条件:

  1. @import导入解析后的css为一个文件,这个less和sass都做到了。css暂时还是做不到的,所以我们不能依靠纯css了,必须得借助预处理器。
  2. 得可以向已有的文件传递变量,那样根据不同的样式实际需求通过传递的变量编译产生相应的css代码。很抱歉目前less好像没有这个功能,而sass有,它就是变量默认值!default。至于stylus没有研究,如果它做了变量默认值这方面的处理,那就ok。

所以目前来说sass可以支持这个一对多模式,less不支持,而stylus我这没没研究,有研究过的可以告诉下是否可以。

接下来我们简单说下一对多模式是怎么工作的,以tobe的布局模板中的第一个templates1为例(默认我们把tobe放在d盘以供调用):

我们在templates1.scss文件中先导入核心文件_base.scss,然后我们要使用到tobe的组件有layout,nav,imgslide,col这四个,导入文件代码如下:

//import scss
@import "D:/tobe/base";
@import "D:/tobe/components/layout";
@import "D:/tobe/components/nav";
@import "D:/tobe/components/imgslide";
@import "D:/tobe/components/col";

导入这些之后,通过templates1.scss解析出来的templates1.css就已经有了我们的base样式和我们组件的默认样式。现在因为我们templates1.html中的imgslide需要的宽高和我们的组件提供的不一样,我们需要改变下变量以生成我们需要的宽高。我们在导入imgslide之前重新设置下变量$imgslideView,以使imgslide里面的这个变量都是以我们这里设置的1000px 340px值来解析出css代码。

//import scss
@import "D:/tobe/base";
@import "D:/tobe/components/layout";
@import "D:/tobe/components/nav";

//重置imgslide中的变量以改变宽高
$imgslideView:       1000px 340px;
@import "D:/tobe/components/imgslide";
@import "D:/tobe/components/col";

这样我们就搞定了,从组件里面加载过来的代码,通过传递变量来生成我们需要的css,而不是需要我们去覆写。

现在如果再有一个项目,需要的imgslide是宽800px高300px,我们同样调用tobe里面的imgslide组件,然后再调用之前重新申明下$imgslideView:800px 340px;就能解析出我们需要的宽800px的样式。

tobe只是一个开始,从此重构的一对多模式将会大显身手,尤其是那些中小企业网站,本来东西结构就差不多,然后就是一些offline的平台或者个人的技术博客,简单至上,需求就是要什么调什么等,而最后的结局可能就是开发个人的ui库或者公司的ui库将会变得更加简单。

再说个后话,其实bootstrap除了上面说的用法之外,也有很多人使用它的sass版本,但是目前它的文件结构并不是按照组件式开发,一对多模式来设计的,所以暂时还做不到如tobe这样灵活使用。

最后如果你对组件式开发,一对多模式的tobe感兴趣的话,欢迎使用及反馈,然后目前的tobe是没有js的,其js交互部分将会由99后续完成,谢谢!

如需转载,烦请注明出处:http://www.w3cplus.com/preprocessor/sass-framework-tobe.html

Nike Air VaporMax 2019

如需转载,烦请注明出处:https://www.w3cplus.com/preprocessor/sass-framework-tobe.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部