17 |
如何使用tobe及如何为tobe开发组件
18 |
如无特殊说明，tobe中所说的所有sass文件都是指以.scss为后缀名的文件，而不是以.sass为后缀名的文件，这两者的区别还是很大的。最大的区别就是前者如css一样需要大括号，而后者则不需要。
19 |
20 |
21 |
如何使用tobe？
22 |
23 |
1、首先下载tobe压缩版，解压到D盘中，或者从github中把这个项目中的tobe文件夹（这里面只包括所有的scss文件）直接放进D盘
24 |
2、新建scss文件，导入tobe中的base或function，如果需要基础的样式及功能，请导入base文件，如果不需要基础样式只需要功能，请导入function文件，代码分为：
25 |
//需要一些基础样式及功能导入base
26 | @import 'D:/tobe/base';
27 |
28 |
//只需要功能导入function
29 | @import 'D:/tobe/function';
30 |
31 |
3、接着导入你需要的组件，以templates1为例，如布局、导航、滚动图片、三栏等宽。请注意：如果需要改变组件里面默认变量的值，请在导入之前重新申明你需要改变的值，如这里的滚动图片的宽高变量$imgslideView，这也正是为什么我们设置变量的时候要使用!default，因为方便导入到其他scss文件中修改变量的默认值。
32 |
//重置变量
33 | $imgslideView: 1000px 340px;
34 |
35 | //import scss
36 | @import "D:/tobe/base";
37 | @import "D:/tobe/components/layout";
38 | @import "D:/tobe/components/nav";
39 | @import "D:/tobe/components/imgslide";
40 | @import "D:/tobe/components/col";
41 |
4、开始你的其他样式
42 |
模板实例下载
43 |
44 |
45 |
46 |
如何开发自己的组件？
47 |
48 |
1、确保D盘中有你的tobe文件夹，如base的路径为D:/tobe/base，如果没有请参考左边如何使用tobe的第一步
49 |
2、新建scss文件，引入tobe中的base文件，注意这里不能用function来替换，因为base里面有一些基础的样式，如reset等，所以不需要你再来另起一些基础的东西。如果你喜欢tobe的这个布局，你也可以导入组件中的layout（关于布局可以在布局模板页面参考空模板创建或下载下面的两个模板资源）
50 |
@import 'D:/tobe/base';
51 | @import 'D:/tobe/layout';
52 |
3、现在你可以写自己的scss代码了，注意组件中的变量或mixin请以你组件名称做前缀，以避免冲突，变量和函数命名规则采用驼峰式，mixin/%命名采用中划线。如需引入其他组件作为基础，请按照左边的如何使用tobe的第三步引入。
53 |
4、如有疑问，请参考example文件中的实例（注意：因为实例中的html文件已经导入了base生成的基础css文件，所以scss文件中引入的是function和相应组件的scss文件）。
54 |
5、开发好了之后，你可以发给w3cplus，如果质量好，我们可以放在tobe的components里面；或者你可以打包提交到tobe的github pending文件夹里面；如果你只供自己使用的话，可以在tobe中建立一个custom的文件夹，把组件的scss文件改成以下划线开头，并去掉上面的引入基础文件，放进去供你自己使用。
55 |
以上属于从空白开始创建自己的组件，当然如果你想和tobe的其他组件保持一致，拥有统一的tobe头部底部布局，tobe为你在example里面预留了一个yourself的文件夹，你可以用这个开始创建你的组件
56 |
57 |
58 |
59 |
我是用户名
青出于蓝而胜于蓝
23 | 
