Sass version of centage less grid

_centage.scss

@import "_vars.scss";

/* This file is part of Centage!. */
/* Copyright (C) 2010 Jussi Jokinen <jussijokinen$iki.fi>. */
/* Licenced under MIT licence */

/*page grid columns*/
$grid:24;

/*space (gutter) between columns. Use percentages, this is a FLUID grid, right?*/
$gut:3%;

/*page size*/
$max-width: strip-unit($site-width)/$base-browser-font-size + 0em;
$min-width:40em;
$page-padding:$gut*2; /*how much page wrapper is apart from browser edges */

/*typography, baseline grid*/

$fontpx:15; /*standard font size in pixels, but without 'px'*/


/* THE FOLLOWING ARE CALCULATED VARIABLES FOR YOUR PLEASURE */
/* -------------------------------------------------------- */
/* gutterless column width */
$col1:100% / $grid;

/* column width when gutters are used */
$col1_gut:(100% - $gut * ($grid - 1)) / $grid;

/* column + gutter */
$col1_plus_gut:$col1_gut + $gut;

/* body font size in percentages */
$bodyfont:100% * ($fontpx/16);

$fontpxem:$fontpx * 1em; /*this is needed for calculations*/


/* content area standard properties, IF you need content to overflow visibly, use .clearfix after .col/.sub_col to override default*/


/*top level column */
@mixin col($col_count:1, $pad_top:0, $pad_right:0, $pad_bottom:0, $pad_left:0) {
  width:(($col1_gut * $col_count) + ($gut * ($col_count - 1)) - $pad_left - $pad_right);
  *width:($col1_gut * $col_count) + ($gut * ($col_count - 1)) - 0.2% - $pad_left - $pad_right;/* for IE */
  float: left;
  // overflow: hidden; // For asterisk on forms.
  margin-right:$gut;
  padding-top:$pad_top;
  padding-right:$pad_right;
  padding-bottom:$pad_bottom;
  padding-left:$pad_left;
  }

/*nested column inside parent container element */
@mixin sub-col($parent_cols:1, $sub_cols:1, $pad_top:0, $pad_right:0, $pad_bottom:0, $pad_left:0){
  width:((100 / ($parent_cols * $col1_gut + ($parent_cols * $gut - $gut))) * ($sub_cols * $col1_gut + ($sub_cols * $gut - $gut)) - $pad_left - $pad_right);/* for IE */
  *width:((100 / ($parent_cols * $col1_gut + ($parent_cols * $gut - $gut))) * ($sub_cols * $col1_gut + ($sub_cols * $gut - $gut))) - 1% - $pad_left - $pad_right;
  float: left;
  overflow: hidden;
  margin-right:(100 / ($parent_cols * $col1_gut + ($parent_cols * $gut - $gut))) * $gut;
  padding-top:$pad_top;
  padding-right:$pad_right;
  padding-bottom:$pad_bottom;
  padding-left:$pad_left;
  }


/* column based on full width of page */
@mixin col-full($col_count:1, $padd_v:0, $padd_h:0) {
  width:(($col1 * $col_count) - ($padd_h * 2%));
  *width:($col1 * $col_count) - 0.2% - ($padd_h * 2%);/* for IE */
  float: left;
  overflow: hidden;
  padding-top:$padd_v;
  padding-bottom:$padd_v;
  padding-left:$padd_h;
  padding-right:$padd_h;}

/* columns without gutters = check demo page to understand difference with .col-full */
@mixin col-nogut($col_count:1, $padd_v:0, $padd_h:0) {
  $col-halfgut-width:(($col1_gut * $col_count) + ($gut * ($col_count)) - ($padd_h * 2%));
  width: $col-halfgut-width;
  *width: $col-halfgut-width - 0.2%;/* for IE */
  float: left;
  overflow: hidden;
  padding-top:$padd_v;
  padding-bottom:$padd_v;
  padding-left:$padd_h;
  padding-right:$padd_h;}

/* columns without gutters, first and last of row */
@mixin col-nogut-first-last($col_count:1, $padd_v:0, $padd_h:0) {
  $col-halfgut-width:(($col1_gut * $col_count) + ($gut * ($col_count)) - ($padd_h * 2%));
  width: $col-halfgut-width - (0.5 * $gut);
  *width: $col-halfgut-width - (0.5 * $gut) - 0.2%;/* for IE */
  float: left;
  overflow: hidden;
  padding-top:$padd_v;
  padding-bottom:$padd_v;
  padding-left:$padd_h;
  padding-right:$padd_h;}

/* helpers to add margins in full column widths */
@mixin margin-left($margin_cols:1){
  margin-left:$col1_plus_gut * $margin_cols;}

@mixin margin-right($margin_cols:1){
  margin-right:$col1_plus_gut * $margin_cols !important;
  *display:inline;}/*double margin bug fix/*

/* helpers to keep layout in baseline and compenstate used borders */
@mixin margin-top($lines:1, $borders_to_compensate:0){
  margin-top: ($line*$lines) - $borders_to_compensate/$fontpxem;}

@mixin margin-bottom($lines:1, $borders_to_compensate:0){
  margin-bottom: ($line*$lines) - $borders_to_compensate/$fontpxem;}

@mixin padding-top($lines:1, $borders_to_compensate:0){
  padding-top: ($line*$lines) - $borders_to_compensate/$fontpxem;}

@mixin padding-bottom($lines:1, $borders_to_compensate:0){
  padding-bottom: ($line*$lines) - $borders_to_compensate/$fontpxem;}

/* ------------------------------------------------------------------- */

/* last element in row */
@mixin collast($align:left) {
  margin-right:0 !important;
  float:$align !important;}

/* if called straight from xhtml */
.last {
  margin-right: 0 !important;}
/* $end */


/* $group other */
/* default clear if content doesn't need to flow outside container */
.clear {
  overflow:hidden;
  display: inline-block;
  zoom:1;
    display: block;}

/* alternative way to clear if your content needs to flow outside container */
// .clearfix:after {
//   content:".";
//   display: block;
//   height: 0;
//   clear:both;
//   visibility: hidden
//   }

/* $end */