webin / tobe Goto Github PK

#无TOBE，不SASS

Tobe是一个写给面向熟悉sass人员使用的框架，以sassCore为核心，所有的组件都单独开发，根据实际需求来调用，避免了臃肿的杂乱代码。由于有着sass的优良基因，tobe的代码更加灵活可控，如果你是一个有着代码洁癖的人，那么tobe的精彩一定不可错过。

##Tobe的创新性：

基于sass，以sassCore为核心，为所有组件打好良好的基石。所有组件根据实际需求来调用，结构清晰明了，scss文件一目了然，再也不需要在众多代码中大海捞针，想修改什么立马找到，有的是时间跟妹子聊天。除此之外，因为有着良好的基石，合理的设计，tobe允许你自由开发组件，从此设计自己或公司的ui库不是问题。

##tobe结构说明

• sass文件夹放的是构建tobe这个网站的scss文件，不包括所有的基础文件及组件，你可以打开看下两个scss文件的源码都很简单；
• css就是sass中解析过来的；
• download是放下载打包资源的；
• pending是放用户提交的打包组件；
• example是整个tobe的所有组件的demo及页面；
• tobe文件夹中放的就是所有的基础sass文件及组件，请把它直接放到d盘中去以方便开发。

##tobe使用说明

1、首先把这个项目中的tobe文件夹（这里面只包括所有的scss文件）直接放进D盘，或者在download文件夹中找到tobe的压缩版，然后解压到D盘中

2、新建scss文件，导入tobe中的base或function，如果需要基础的样式及功能，请导入base文件，如果不需要基础样式只需要功能，请导入function文件，代码分别为：

//需要一些基础样式及功能导入base
@import 'D:/tobe/base';

//只需要功能导入function
@import 'D:/tobe/function';

3、接着导入你需要的组件，以templates1为例，如布局、导航、滚动图片、三栏等宽。请注意：如果需要改变组件里面默认变量的值，请在导入之前重新申明你需要改变的值，如这里的滚动图片的宽高变量$imgslideView，这也正是为什么我们设置变量的时候要使用!default，因为方便导入到其他scss文件中修改变量的默认值。

//重置变量
$imgslideView:       1000px 340px;

//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";

4、开始你的其他样式