sass实战演练06 - 把布局拆分为12列(2):拆分和偏移

css知识点
box-sizing: border-box;
让border和padding也加入总宽度的计算之内

*{
  margin: 0;
  padding: 0;
  font-size: 14px;
  box-sizing: border-box;
};

1.拆分为12列

@for $i from 1 through 12{
  .col-xs-#{$i}{
    float: left;
    width: 100% * ($i / 12);
    border: 1px solid red;
  }
}

编译之后的css如下：

.col-xs-1 {
  float: left;
  width: 8.33333%;
  border: 1px solid red; }

.col-xs-2 {
  float: left;
  width: 16.66667%;
  border: 1px solid red; }

.col-xs-3 {
  float: left;
  width: 25%;
  border: 1px solid red; }

.col-xs-4 {
  float: left;
  width: 33.33333%;
  border: 1px solid red; }

.col-xs-5 {
  float: left;
  width: 41.66667%;
  border: 1px solid red; }

.col-xs-6 {
  float: left;
  width: 50%;
  border: 1px solid red; }

.col-xs-7 {
  float: left;
  width: 58.33333%;
  border: 1px solid red; }

.col-xs-8 {
  float: left;
  width: 66.66667%;
  border: 1px solid red; }

.col-xs-9 {
  float: left;
  width: 75%;
  border: 1px solid red; }

.col-xs-10 {
  float: left;
  width: 83.33333%;
  border: 1px solid red; }

.col-xs-11 {
  float: left;
  width: 91.66667%;
  border: 1px solid red; }

.col-xs-12 {
  float: left;
  width: 100%;
  border: 1px solid red; }

在HTML模板里使用：

        <div class="col-xs-6">第一列</div>
        <div class="col-xs-6">第二列</div>

浏览器预览：

2.如何设置列的偏移？
有时候我们并不需要在一行中放满12列，比如我只放1列，且需要div往右偏移2列
我们定义规则如下：
col-xs-offset-xxx
其中xxx可以是1-12，其实所谓的便宜就是让该div的外边界设置一个相应的值就可以了
加入：

@for $i from 1 through 12{
  .col-xs-#{$i}{
    float: left;
    width: 100% * ($i / 12);
    border: 1px solid red;
  }
  .col-xs-offset-#{$i}{
    margin-left: 100% * ($i / 12);
  }
}

编译成css之后，我们来到模板上实验一下：

        <div class="col-xs-1 col-xs-offset-4">第一列</div>
        <div class="col-xs-1">第二列</div>

        <div class="col-xs-1 col-xs-offset-1">第一列</div>
        <div class="col-xs-1">第二列</div>