Bootstrap-sass<2>基本布局

Boostrap对于布局的核心在于它的栅格系统，即对不同分辨率下设置了一套相对普适的样式，我们先看Boostrap.css中预定义的几种设备分类。

如果你想查询更多，可以转到Bootstrap官网：http://getbootstrap.com/css；
所以，在bootstrap下，我们常常是这样进行流式布局的：
<div class="container-fluid">
  <div class="row">
    ...
  </div>
</div>
适应不同分辩率时是采取如下代码：(如为手机和笔记本做分辨率适配)
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
但是，在bootstra-sass里面：
打开_variables.scss文件 里，我用sublime打开的。

我们可以看到，它已经变成几个变量了，所以当你适配部分分辨率时就变成如下方式；
<1>简单的布局：
<-- bootstrap方式-->
<div class="container">
  <div class="row">
    <div class="col-md-4 col-sm-6 col-xs-12">Sidebar content</div>
    <div class="col-md-8 col-sm-6 col-xs-12">Article content</div>
  </div>
</div>


<--boostrap-sass方式-->
<div class="container">
  <div class="main">
    <div class="sidebar">Sidebar content</div>
    <div class="content">Article content</div>
  </div>
</div>
<--sass code-->
.main {
 @include make-row;


  .sidebar {
 @include make-xs-column(12);
 @include make-sm-column(6);
 @include make-md-column(4);
  }


  .content {
 @include make-xs-column(12);
 @include make-sm-column(6);
 @include make-md-column(8);
  }
}
从这个例子也许你感觉两者差别不大，但当工程量不是一两个页面时，你就会发现层次关系的重要性，也就是sass语法在组织和之后的调试，可读等方面的优势。
<2>offset属性
<-- bootstrap方式-->
<div class="container">
  <div class="row">
    <div class="col-md-4 col-sm-6 col-xs-12">Sidebar content</div>
    <div class="col-md-8 col-sm-6 col-xs-12">Article content</div>
  </div>
</div>


<--boostrap-sass方式-->
<div class="main">
  <div class="col">Column</div>
  <div class="col">Column</div>
</div>
<--sass code-->
.main {
 @include make-row;
  .col {
 @include make-md-column(4);
    &:nth-child(2) {
 @include make-md-column-offset(4);//&表示父选择器
    }
  }
}
当你看完这两个例子，你是否有所感觉就是，后者或者说sass的html与css样式分离的更清晰，也更好编辑，语言更加自由点；