标签：
## 基本准备
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共同用的一个样式。所以进行这样的逐层归类。
标签：
原文地址：http://www.cnblogs.com/supersoup/p/4824882.html
