Grids + Neat 2.0.0

_grid.scss

//--------------------------------------------------------------
// GRID
//--------------------------------------------------------------

// Outputs .prefix-col-#
.prefix {
	@include grid-classes(null, $neat-grid);
}

_mixins.scss

//--------------------------------------------------------------
// VARIABLES
//--------------------------------------------------------------

//-----------------------------------------
// Grid Classes
//-----------------------------------------

////
/// @author Carrie Forde
/// @group wds
////

////
///  @include grid-media($tablet-portrait-up) {
///
///    .client-col {
///      @include grid-classes;
///    } // .client-col
///  }
///
///
/// .client-col-wide-1 {
///    width: calc(8.33333% - 2.8287rem);
///    float: left;
///    margin-left: 2.61111rem;
/// }
////


@mixin grid-classes($gutter-name, $context) {

	$columns: map-get($context, columns );

	@for $i from 1 through $columns {

		// Generate the column classes.
		&-#{$gutter-name}-#{$i} {
			@include grid-column($i, $context);
		}
	}
}

_variables.scss

//--------------------------------------------------------------
// VARIABLES
//--------------------------------------------------------------

//-----------------------------------------
// Grid Settings
//-----------------------------------------
$neat-grid: (
	columns: 12,
	gutter: 15px,
);

$gutter: 15px;
$max-width: 960px;

//-----------------------------------------
// Breakpoints
//
// Breakpoints use the Neat Grids so they
// can be passed to `grid-media()`.
//-----------------------------------------
$large-desktop: (
	media: 1680px
);
$desktop: (
	media: 1366px
);
$small-desktop: (
	media: 1200px
);
$tablet-landscape: (
	media: 1024px
);
$wp-admin-bar: (
	media: 783px
);
$tablet-portrait: (
	media: 768px
);
$phone-landscape: (
	media: 640px
);
$phone-portrait: (
	media: 360px
);

index.scss

@import 'variables';
@import 'mixins';
@import 'grid';