Generated by SassMeister.com.

SassMeister-input.scss

// ----
// libsass (v3.2.4)
// ----

/*! Hyx v2.0.0 | MIT License | http://github.com/thinkxl/hyx.less */

// Global settings 
$gutter: 4% !default;    // - distance between columns
$grid-size: 12 !default; // - num of columns
$width: 100% !default;   // - space that we want to use for the grid

// Mixin that does all the math in % for columns 
//
// @param $num						{num} number of columns
// @param $global-gutter	{num} gutter inhered from global `$gutter;`
// @param @in-gutter			{num} gutter that only affects this mixin
//
// @usage:
//   `@include core(0, 2%, 0);`
//   `@include core(1/4, 4%, 1%);`
@mixin core($num, $gutter, $margin) {
	$col-size: ( $width / $grid-size ); 
	$cols: ( $width / ( $col-size * $num ) );
	float: left;
	width: ( $width - ( $gutter * ( $cols - 1 ) ) ) / $cols;
	margin-left: $margin; 
}

// Allow to use fractions as number of colums 
//
// @param $num		{num} fraction representing number of columns
// @param $margin {num} overwrite @param $gutter mostly to set it 0
// @param $gutter {num} set margin-right to the global $gutter value
//
// @usage:
//   `.col-1-3 { 
//     @include fraction(1/3);
//   }
//  
//   .col-1-2 {
//     @include fraction(1/2); 
//   }`
@mixin fraction($num, $margin: $gutter, $gutter: $gutter) {
	@include core($num * $grid-size, $gutter, $margin);
}

// Main mixin that define the size in % based on columns 
//
// @param $num		{num} number of columns
// @param $margin {num} overwrite @param $gutter mostly to set it 0
// @param $gutter {num} set margin-right to the global $gutter value

//
// @usage:
//   `.col-1-4 {
//     .cols(3);
//   }
//
//   .col-8 {
//     .cols(8);
//   }
//
//	 /* If is first element with no namespace */
//   #main {
//     .cols(8, 0); /* set margin-left to 0 */
//   }`
@mixin cols($num, $margin: $gutter, $gutter: $gutter) {
	@include core($num, $gutter, $margin);
}

// It will take first element matching the attribute selector
// and will add a `margin-left: 0;` to avoid collapsing, so we 
// can build grids like: `.col-8 {};` and `.col-4 {};`
//
// @param $name {String} namespace you want to use
//
// @usage:
//   `@include namespace('grid-');`
@mixin namespace($namespace: 'col-') {
	[class^="#{$namespace}"]:first-child {
		margin-left: 0;	
	}
}

// Grid container
.row { 
	width: 100%; 

	&:before,
	&:after {
		content: " "; 
		display: table; 
	}

	&:after {
		clear: both;
	}
}

// Box sizing reset
// http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
//
// @usage:
//   `@include edit();`
@mixin box-sizing() {
	html {
		box-sizing: border-box;
	}

	*, *:before, *:after {
		box-sizing: inherit;
	}
}

// It will make sites look from this: http://bit.ly/1CQmQwl to this: http://bit.ly/1CQmVjH 
//
// @usage:
//   `@include edit();`
@mixin edit() {
	* {
		background: rgba(0,0,0,0.1);
	}
}

.col-1-1 { @include fraction(1/1); }
.col-1-2 { @include fraction(1/2); }
.col-1-3 { @include fraction(1/3); }
.col-1-4 { @include fraction(1/4); }
.col-1-5 { @include fraction(1/5); }
.col-1-6 { @include fraction(1/6); }
.col-1-7 { @include fraction(1/7); }
.col-1-8 { @include fraction(1/8); }
.col-1-9 { @include fraction(1/9); }
.col-1-10 { @include fraction(1/10); }
.col-1-11 { @include fraction(1/11); }
.col-1-12 { @include fraction(1/12); }

.col-1 { @include cols(1); }
.col-2 { @include cols(2); }
.col-3 { @include cols(3); }
.col-4 { @include cols(4); }
.col-5 { @include cols(5); }
.col-6 { @include cols(6); }
.col-7 { @include cols(7); }
.col-8 { @include cols(8); }
.col-9 { @include cols(9); }
.col-10 { @include cols(10); }
.col-11 { @include cols(11); }
.col-12 { @include cols(12); }

.last-cold {
  margin-left: 0 !important;
}

SassMeister-output.css

/*! Hyx v2.0.0 | MIT License | http://github.com/thinkxl/hyx.less */
.row {
  width: 100%;
}

.row:before,
.row:after {
  content: " ";
  display: table;
}

.row:after {
  clear: both;
}

.col-1-1 {
  float: left;
  width: 100%;
  margin-left: 4%;
}

.col-1-2 {
  float: left;
  width: 48%;
  margin-left: 4%;
}

.col-1-3 {
  float: left;
  width: 30.66667%;
  margin-left: 4%;
}

.col-1-4 {
  float: left;
  width: 22%;
  margin-left: 4%;
}

.col-1-5 {
  float: left;
  width: 16.8%;
  margin-left: 4%;
}

.col-1-6 {
  float: left;
  width: 13.33333%;
  margin-left: 4%;
}

.col-1-7 {
  float: left;
  width: 10.85714%;
  margin-left: 4%;
}

.col-1-8 {
  float: left;
  width: 9%;
  margin-left: 4%;
}

.col-1-9 {
  float: left;
  width: 7.55556%;
  margin-left: 4%;
}

.col-1-10 {
  float: left;
  width: 6.4%;
  margin-left: 4%;
}

.col-1-11 {
  float: left;
  width: 5.45455%;
  margin-left: 4%;
}

.col-1-12 {
  float: left;
  width: 4.66667%;
  margin-left: 4%;
}

.col-1 {
  float: left;
  width: 4.66667%;
  margin-left: 4%;
}

.col-2 {
  float: left;
  width: 13.33333%;
  margin-left: 4%;
}

.col-3 {
  float: left;
  width: 22%;
  margin-left: 4%;
}

.col-4 {
  float: left;
  width: 30.66667%;
  margin-left: 4%;
}

.col-5 {
  float: left;
  width: 39.33333%;
  margin-left: 4%;
}

.col-6 {
  float: left;
  width: 48%;
  margin-left: 4%;
}

.col-7 {
  float: left;
  width: 56.66667%;
  margin-left: 4%;
}

.col-8 {
  float: left;
  width: 65.33333%;
  margin-left: 4%;
}

.col-9 {
  float: left;
  width: 74%;
  margin-left: 4%;
}

.col-10 {
  float: left;
  width: 82.66667%;
  margin-left: 4%;
}

.col-11 {
  float: left;
  width: 91.33333%;
  margin-left: 4%;
}

.col-12 {
  float: left;
  width: 100%;
  margin-left: 4%;
}

.last-cold {
  margin-left: 0 !important;
}