Working area for fully featured BBX Streetgang Grid

SassMeister-input.scss

// ---
// Breakpoint (v2.0.5)
// Sass (v3.2.8)
// ---


@import "compass";

// grid variables
$grid-gutter: 30px !default;
$grid-width: 100% !default;

// breakpoints
$mobile-v: 320px !default;
$mobile-h: 480px !default;
$tablet-v: 768px !default;
$tablet-h: 1024px !default;

// utility extension mixin

@mixin x($base, $variants...) {
    @extend %#{$base}.base;
    @each $var in $variants {
        @extend %#{$base}.#{$var};
    }
}
// LN GRID SETUP
%grid {
    &.base {
        @include box-sizing(border-box);
		@include background-clip(content-box);
	}
	&.cell, &.col, &.column {
		@extend %grid.base;
		padding-left: ($grid-gutter / 2);
		padding-right: ($grid-gutter / 2);
		float: left;
		// width: 100%;
	}
	&.row, &.block {
		@extend %grid.base;
		@include pie-clearfix;
		margin-left: -($grid-gutter / 2);
		margin-right: -($grid-gutter / 2);
	}
	&.wrap,&.wrapper {
    	@extend %grid.base;
    	@include pie-clearfix;
		margin-left: auto;
		margin-right: auto;
		padding-left: ($grid-gutter / 2);
		padding-right: ($grid-gutter / 2);
	}

}

// wrap mixins
@mixin wrap-size($w: 100%) { width: $w; }
@mixin wrap-set($w) { @extend %grid.wrap; @include wrap-size($w); }
@mixin bp-wrap-size($bp, $w) { @include breakpoint($bp) { @include wrap-size($w); } }

// row mixin
@mixin row-set { @extend %grid.row; }

// column mixins
@mixin col-size-old($n, $d, $args...) {
	width: $n / $d * 100%;
	// @if length($args) >= 1 { position: relative; }
	@each $arg in $args {
		$dir: nth($arg,1); $p: nth($arg,2);
		@if $p == out {
			margin-#{opposite-position($dir)}: 100%;
			margin-#{$dir}: $n / $d * -100%;
			margin-bottom: -100%;
		} @else { margin-#{$dir}: $p / $d*100%; }
	}
}
@mixin col-size($span, $offsets...) {
    $n: nth($span,2); $d: nth($span,3);
	width: $n / $d * 100%;
	// @if length($offsets) >= 1 { position: relative; }
	@each $offset in $offsets {
		$dir: nth($offset,1); $p: nth($offset,2);
		@if $p == out {
			margin-#{opposite-position($dir)}: 100%;
			margin-#{$dir}: $n / $d * -100%;
			margin-bottom: -100%;
		} @else { margin-#{$dir}: $p / $d*100%; }
	}
}
@mixin col-set($args...) { @extend %grid.col; @include col-size($args...);}
@mixin bp-col-size($bp, $args...) { @include breakpoint($bp) { @include col-size($args...); } }

//.container { @include wrap-set(30em); }
//.test-row { @include row-set(); }
.test-col { @include col-set(span 2 3, right 2); }

// DESIRED SYNTAX

// @include column(span 1 4)
// @include bp-column(mobile, span 2 3, right 1, left -3);
// @include bp-column(tablet, span 1 3, right 2);
// @include bp-column(desktop, span 3 3, right out);

// FUTURE FEATURE: generate and use namespaced extension points

// .desktop-span-6-3
// .desktop-right-plus-1-3
// .desktop-left-minus-2-3
// .desktop-right-outside

SassMeister-output.css

.test-col {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-background-clip: content;
  -moz-background-clip: content;
  background-clip: content-box;
}
.test-col {
  padding-left: 15px;
  padding-right: 15px;
  float: left;
}
.test-col {
  width: 66.66667%;
  margin-right: 66.66667%;
}