Generated by SassMeister.com.

SassMeister-input.scss

// ----
// libsass (v3.2.5)
// ----

/*! 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-2 {
  @include cols(4);
}

$breakpoints: (
  300px: 6,
  200px: 4
);

@each $name, $value in $breakpoints {
  @media only screen and (min-width: $name) {
    .col-1-4 {
      @include cols($value);
    }
  }
}

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-2 {
  float: left;
  width: 30.66667%;
  margin-left: 4%;
}

@media only screen and (min-width: 300px) {
  .col-1-4 {
    float: left;
    width: 48%;
    margin-left: 4%;
  }
}

@media only screen and (min-width: 200px) {
  .col-1-4 {
    float: left;
    width: 30.66667%;
    margin-left: 4%;
  }
}