@charset "UTF-8";
//-----------------------------------------------------  
// grid scss
// 支持固定宽度和百分比宽度，可以控制是否输出span的class
//----------------------------------------------------- 

// thanks:
// http://www.blankwork.net/
// http://semantic.gs/
// http://heygrady.com/blog/2011/02/17/using-sass-with-the-1kb-grid-system/   
// https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/functions/_flex-grid.scss
// http://bjorkoy.com/2010/05/css-grids-with-sass/

// variables
// 这里设计的是1000px的布局，每个栅格为65px，共12个，计算公式：(65+20)*12-20 = 1000
// 如果将gridColumnWidth设置为60px，就是盛名的960网格系统
//----------------------------------------------------- 
$gridColumns:                     12 !default;      // Total number of columns
$gridColumnWidth:                 65px !default;   // Width of a single column
$gridGutter:                      20px !default;     // Width of the gutter
$gridSystemWidth:                 $gridColumns * ($gridColumnWidth + $gridGutter); //grid system width


// percent layout setting
// 百分比布局的变量设置
//----------------------------------------------------- 
$gridPercentSwitch:               false !default; // 默认为固定宽度布局，设置为true为百分比
$gridRealWidth:                   $gridSystemWidth !default;
$gridGutterPercent:               percentage($gridGutter / $gridSystemWidth) !default;

@if $gridPercentSwitch{
  $gridRealWidth:                 100%;
}

// ie6/7 fluid layout bug: http://tylertate.com/blog/2012/01/05/subpixel-rounding.html
// ie6/7  getWidth($i, true, $correction)
$gridMinWidth:                    1000 !default;
$gridCorrection:                  0.5 / $gridMinWidth * 100 * 1%;


// margin value
//----------------------------------------------------- 
// if fluid layout the value is $gridGutterPercent
// if fixed layout the value is $gridGutter
$gridMarginValue:                 if($gridPercentSwitch, $gridGutterPercent, $gridGutter) !default;


// true for grid class(.span1, .span2...)
// ----------------------------------------
$gridSpanSwitch:                  false !default;


// A Function to calculate width:
// 这个函数几乎是blankwork的灵魂，用来计算宽度的
// Example usage: (based on default values)
// getWidth(3, false) would return 240px
// getWidth(3) or getWidth(3, true) would return 220px;
// and plain getWidth() or getWidth would return 940px;
@function getWidth($i:$gridColumns, $onlyInnerWidth:true, $subtract:0){
  // First set a default return value
  $return: (($gridColumnWidth + $gridGutter) * $i / $gridSystemWidth) * $gridRealWidth - $subtract !default;

  // If we want to get only the inner width (without gutter)
  @if $onlyInnerWidth == true {
    // Return the total calculated width, without the margins
    // If the second parameter of this function is not specified
    // This is what is going to be returned
    $return: ((($gridColumnWidth + $gridGutter) * $i - $gridGutter) / $gridSystemWidth) * $gridRealWidth - $subtract;
  }

  @return $return;
}


// A Function to calculate percent width:
// Example:getPercent(3,6)
@function getPercent($i, $container-columns:$gridColumns, $onlyInnerWidth:false, $subtract:0) {
  $percentage: percentage($i / $container-columns);
  
  @if $onlyInnerWidth == true {
    $width: $i * $gridColumnWidth + ($i - 1) * $gridGutter;
    $container-width: $container-columns * $gridColumnWidth + ($container-columns - 1) * $gridGutter;
    $percentage: percentage($width / $container-width);
  }
  
  @return $percentage - $subtract;
}


// span or column's gutter
%margin-gutter{
  margin-right: $gridMarginValue;

  @if $gridPercentSwitch and $lte7{
    *margin-right: $gridMarginValue - $gridCorrection;
  }
}

// Column Mixin:
// We're defining the default values as follows:
// Default Column Count: Max Column Count
// Padding (explained below): 0
@mixin column($i: $gridColumns, $subtract:0){
  // 解决当$i 小于$gridColumns的时候需要float
  @if $i < $gridColumns {
    @extend %float;
  }
  @extend %margin-gutter;

  $getWidth: getWidth($i, true, $subtract); // Use the width calculation function to get the width 
  width: $getWidth;

  @if $gridPercentSwitch and $lte7{
    *width:$getWidth - $gridCorrection;
  } 
}

// wrapper
// This typically is a main content wrapper, 
// But just in case someone finds an alternative use of this, 
// we shouldhave the flexibility
// So wrapper( column count, center ?, subtract)
@mixin wrapper($i: $gridColumns, $center:true, $subtract:0){
  @extend %clearfix;
  
  // Because this is a wrapper, we don't need the outer gutter - we need the full width
  $getWrapperWidth: getWidth($i, false);
  // In case there is a need to subtract the wrapper
  $wrapperWidth: $getWrapperWidth - $subtract;
  width:$wrapperWidth;

  // If we want the wrapper to be centered (by default we do)
  @if $center == true {
    margin-left:auto;
    margin-right:auto;
  }
}


// alpha & omega
//----------------------------------------------------- 
@mixin alpha{
  margin-left:0;
}
@mixin omega{
  margin-right:0;
}


// prepend & append
//----------------------------------------------------- 
@mixin prepend($i:1, $subtract:0){ 
  margin-left: getWidth($i,false,$subtract);
} 
@mixin append($i:1, $subtract:0){ 
  margin-right: getWidth($i,false,$subtract);
}


// class span1-$gridColumns
// span的class循环输出，通过变量$gridSpanSwitch来控制是否输出
//-----------------------------------------------------  
@if $gridSpanSwitch {
  @for $i from 1 through $gridColumns {
    .span#{$i} { 
      @extend %float;
      @extend %margin-gutter;
      
      width:getWidth($i);
      
      @if $gridPercentSwitch and $lte7{
        *width:getWidth($i) - $gridCorrection;
      } 
    }
  } 
}
