doctype html
html
  head
    title SCSS自製RWD Grid Systm
    link(href='grid.css', rel='stylesheet')
    style.
      body{
        margin:0;
        padding:0;
      }
      #header{
        background:#333;
        color:#fff;
        height:100px;
        line-height:100px;
        font-size:48px;
      }
      #footer{
        background:#333;
        color:#fff;
        height:50px;
        line-height:50px;
        font-size:15px;
      }

      #content{
        background:#9BE1F3;
        padding:10px;
      }
      #sidebar{
        background:#F3466D;
        padding:10px;
      }
  body
    #header
      .container
        |梅strap
    #main
      .container
        .row
          #content.col-md-8
            |內容
          #sidebar.col-md-4
            |側邊欄
    #footer
      .container
        |版尾

$sm:768px;
$md:992px;
$lg:1200px;

$col:100%/12;
$col12:$col *12;
$col11:$col *11;
$col10:$col *10;
$col9:$col *9;
$col8:$col *8;
$col7:$col *7;
$col6:$col *6;
$col5:$col *5;
$col4:$col *4;
$col3:$col *3;
$col2:$col *2;
$col1:$col *1;

@mixin borderbox(){
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
* {
  @include borderbox();
  
  &:before {
   @include borderbox();
  }
  &:after {
    @include borderbox();
  }
}
.row{
  width: 100%;
 
}
.container{
  width:100%;
  margin: 0 auto;
  overflow: hidden;
  @media (min-width: $sm){
    width: 750px;
    margin: 0 auto;
    overflow: hidden;
  }
  @media (min-width: $md){
    width: 970px;
    margin: 0 auto;
    overflow: hidden;
  }
  @media (min-width: $lg){
    width: 1170px;
    margin: 0 auto;
    overflow: hidden;
  }
}

@mixin grid-col($size,$pre:y){
  .col-#{$size}-12,
  .col-#{$size}-11,
  .col-#{$size}-10,
  .col-#{$size}-9,
  .col-#{$size}-8,
  .col-#{$size}-7,
  .col-#{$size}-6,
  .col-#{$size}-5,
  .col-#{$size}-4,
  .col-#{$size}-3,
  .col-#{$size}-2,
  .col-#{$size}-1{
    float:left;
  }
  .col-#{$size}-12{
    @if $pre == "y"{
      width:100%;
    }@else{
      width: $col12;
    }
  }
  .col-#{$size}-11{
    @if $pre == "y"{
      width:100%;
    }@else{
      width: $col11;
    }
  }
  .col-#{$size}-10{
    @if $pre == "y"{
      width:100%;
    }@else{
      width: $col10;
    }
  }
  .col-#{$size}-9{
    @if $pre == "y"{
      width:100%;
    }@else{
      width: $col9;
    }
  }
  .col-#{$size}-8{
    @if $pre == "y"{
      width:100%;
    }@else{
      width: $col8;
    }
  }
  .col-#{$size}-7{
    @if $pre == "y"{
      width:100%;
    }@else{
      width: $col7;
    }
  }
  .col-#{$size}-6{
    @if $pre == "y"{
      width:100%;
    }@else{
      width: $col6;
    }
  }
  .col-#{$size}-5{
    @if $pre == "y"{
      width:100%;
    }@else{
      width: $col5;
    }
  }
  .col-#{$size}-4{
    @if $pre == "y"{
      width:100%;
    }@else{
      width: $col4;
    }
  }
  .col-#{$size}-3{
    @if $pre == "y"{
      width:100%;
    }@else{
      width: $col3;
    }
  }
  .col-#{$size}-2{
    @if $pre == "y"{
      width:100%;
    }@else{
      width: $col2;
    }
  }
  .col-#{$size}-1{
    @if $pre == "y"{
      width:100%;
    }@else{
      width: $col1;
    }
  }
}
@include grid-col(sm);
@include grid-col(md);
@include grid-col(lg);
@media (min-width:$sm){
  @include grid-col(sm,n);
}
@media (min-width:$md){
  @include grid-col(md,n);
}
@media (min-width:$lg){
  @include grid-col(lg,n);
}