bootstrap初用新得1

## 基本准备

1. 首先把相关软件窗口规划好，对于我的喜好，我喜欢把除了浏览器外的其他软件分为左右两个半屏。左边和右边很多软件之间是需要配合使用的：
    * 左边： scss文件，ps的guideGuide分栏图。
    * 右边： html文件，css文件，markMan，文字txt。
    * 另外，还需要打开images图相的文件。这个具体放左还是放右根据现在使用的是scss还是html来决定。
    * 使用guideGuide时要注意，由于该插件是从第一列的内容区开始画线的，所以，在扣除左边距时要包含以下内容：背景色区（该方向上的无彩色部分），背景图区（（彩色图宽-container宽度）/2 ），以及列间隙的一半（即列的padding值，960宽的12列式对应的是15px）。

2. 然后打开koala，新建compass项目，修改配置文件。

3. 复制需要使用的bootstrap文件、文本txt、图片到项目中。新建相关的文件。

4. 自己写的一些常用的混合mixin，可以保留一份，使用时导入即可。不必要每次都重新写。比如这是我常用到的混合。

/*mixin*/
        @mixin bg($url:none, $repeat:no-repeat, $x:0, $y:0) {
          background: url($url) $repeat $x $y;
        }
        @mixin wh($w:auto, $h:auto) {
          width: $w;
          height: $h;
        }
        @mixin o() {
          padding: 0;
          margin: 0;
        }
        @mixin be-nav($f:none) {
          float: $f;
          list-style: none;
          @include o;
        }
        @mixin be-position($p:relative, $l:0, $t:0) {
          position: $p;
          left: $l;
          top: $t;
        }

## 计划分析

1. 首先拿着一个网页进行分析：

* 特别是看看有哪些图片可供使用，
    * 看看可以分为那几个大的区域，大的区域由分解成小的区域，小的区域由哪些我已经常用的小部件： 比如导航条和logo的组合，h和p的文本区域组合、列表组合；或者没有熟悉的小部件那就要。
    * 文本规划：计划一下有哪几种文字样式？h1到h6要用哪几个，p的样式是否只有一个，a有几种，li，span，input样式有几种？。大概就以上几种文本。
    * 在草稿纸上画上草图，计划一下每个栏大致的一个实现思路。注意一定要争取用最简单的方式去实现。

2. 对变量、混合及继承的规划：

* 深浅的背景色、重点文字色，常规文字色。这样避免在具体的部分写上具体的值，而是用一个语义化的变量来代替它。
    * 混合，主要是除了自己常用的外，还需要做的混合，比如雪碧图我还没有进行很好的通用性的封装。有变量的用“混合不用继承”。
            
            /*variable*/
            $seletorlist: sitemap mail home;

/*mixin*/
            /*每一组雪碧图都得写这么一段话，不知道框架本身是否提供了更好的封装*/
            @import "selectors/*.png";
            @include all-selectors-sprites;
            @mixin use-selectors-imgs($photoName) {
              @include wh(selectors-sprite-width($photoName), selectors-sprite-height($photoName));
              @include selectors-sprite($photoName);
            }

/*content*/
            @for $i from 1 through 3 {
              .#{nth($seletorlist,$i)} {
                @include use-selectors-imgs(pic-#{nth($seletorlist,$i)});
                &:hover {
                  @include use-selectors-imgs(pic-#{nth($seletorlist,$i)}-act);
                }
              }
            }

* 继承。我对继承的理解是，我需要把某种内容'pStyle1'所采取的字体和文本样式定下来，这样，在遇到非普遍性的样式时，直接和'pStyle1'一致，而不是把'pStyle1中的代码又写下来'。虽然和混合作用一样，但是毕竟他不是在里面多添加了声明，更合理一些。没有变量的，同时在类型逻辑上有关联的我认为应该“用继承不用混合”。表示一种样式的内容。
    
3. 把内容分成不同的类型，这些类型对应着不同的字体和文本样式。把这些类型定义好，用于后期进行继承。这个和第一步分区域不同，这是根据内容进行的划分，比如说，都是h1类型的标签，或者都是p元素内的内容，一般一个页面他们的都是一致的。那为什么不用变量直接写在样式里呢？因为可能是几个h1共同用的一个样式。所以进行这样的逐层归类。