Bootstrap-sass基本布局

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

如果你想查询更多，可以转到Bootstrap官网：http://getbootstrap.com/css；
所以，在bootstrap下，我们常常是这样进行流式布局的：

 

    ...
 

适应不同分辩率时是采取如下代码：(如为手机和笔记本做分辨率适配)

 

.col-xs-6 .col-md-4

 

.col-xs-6 .col-md-4

 

.col-xs-6 .col-md-4

但是，在bootstra-sass里面：
打开_variables.scss文件 里，我用sublime打开的。

我们可以看到，它已经变成几个变量了，所以当你适配部分分辨率时就变成如下方式；
<1>简单的布局：
<-- bootstrap方式-->

 

   

Sidebar content

   

Article content

 

<--boostrap-sass方式-->

 

   

Sidebar content

   

Article content

 

<--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方式-->

 

   

Sidebar content

   

Article content

 

<--boostrap-sass方式-->

 

Column

 

Column

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