Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.10)
// ----

// view pen @: http://codepen.io/napotopia/pen/hFjuv

@import "compass";

@mixin col-generator($items...) {
    
    @each $item in $items {
        $cols: nth($item, 1);
        $outof: nth($item, 2);
        
        .mui-c-#{$cols}-#{$outof} {
            width: percentage($cols / $outof);
        }
    }
 
}


* {
  @include box-sizing(border-box);
}

$pad: 1em;


.mui-p {
  padding: $pad;
}

.mui-p-r {
  padding-right: $pad;
}

.mui-p-h-r {
  padding-right: $pad/2;
}

.mui-p-h-l {
  padding-left: $pad/2;
}

.mui-p-b {
  padding-bottom: $pad;
}

.mui-p-n {
  padding: 0 !important;
}

.mui-g {
  background: white;
  @extend .mui-p-b;
  
  &:after {
    /* Or @extend clearfix */
    content: "";
    display: table;
    clear: both;
  }
}

[class*='mui-c-'] {
	float: left;
  @extend .mui-p-r;
  .mui-g &:last-of-type {
  	padding-right: 0;
  }
}

@include col-generator( (2 3), (1 3), (1 2), (1 4), (1 8) );

.mui-g-mod {
  .mui-g-p & {
    @extend .mui-p;
  }
  background: #ccc;
}

.no-bg .mui-g-mod {
  background: none;
}

/* Opt-in outside padding */
.mui-g-p {
  padding: $pad 0 $pad $pad;
  [class*='mui-c-']:last-of-type {
    padding-right: $pad;
  }
}

.no-p .mui-g-mod {
  @extend .mui-p-n;
}

SassMeister-output.css

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.mui-p, .mui-g-p .mui-g-mod {
  padding: 1em;
}

.mui-p-r, [class*='mui-c-'] {
  padding-right: 1em;
}

.mui-p-h-r {
  padding-right: 0.5em;
}

.mui-p-h-l {
  padding-left: 0.5em;
}

.mui-p-b, .mui-g {
  padding-bottom: 1em;
}

.mui-p-n, .no-p .mui-g-mod {
  padding: 0 !important;
}

.mui-g {
  background: white;
}
.mui-g:after {
  /* Or @extend clearfix */
  content: "";
  display: table;
  clear: both;
}

[class*='mui-c-'] {
  float: left;
}
.mui-g [class*='mui-c-']:last-of-type {
  padding-right: 0;
}

.mui-c-2-3 {
  width: 66.66667%;
}

.mui-c-1-3 {
  width: 33.33333%;
}

.mui-c-1-2 {
  width: 50%;
}

.mui-c-1-4 {
  width: 25%;
}

.mui-c-1-8 {
  width: 12.5%;
}

.mui-g-mod {
  background: #ccc;
}

.no-bg .mui-g-mod {
  background: none;
}

/* Opt-in outside padding */
.mui-g-p {
  padding: 1em 0 1em 1em;
}
.mui-g-p [class*='mui-c-']:last-of-type {
  padding-right: 1em;
}