Generated by SassMeister.com.

input.scss

// "Spartan" Grid System
// version: 6.1.2
// https://github.com/SimonHarte/SpartanGrid
// License: MIT
// Copyright 2015 Simon Harte <[email protected]>

$spartan-config: () !global;

// _pow() - Raise number to the nth power
//
// @param {number} $base      The base number
// @param {number} $exponents The exponent to which to raise $base
@function _pow($base, $exponents) {
	$raised: 1;

	@for $i from 1 through $exponents {
		$raised: $raised * $base;
	}

	@return $raised;
}

// _strip-unit() - from https://css-tricks.com/snippets/sass/strip-unit-function/
@function _strip-unit($number) {
	@if type-of($number) == 'number' and not unitless($number) {
		@return $number / ($number * 0 + 1);
	}

	@return $number;
}

@function _get-rounded($val, $type: 'round') {
	// Float precision used for rounding is the most important variable because we get different behaviours over browsers
	// and certain grid container widths. Note that rounding issues only exist for width and padding style properties.
	//
	// There are two factors to consider when adjusting the precision:
	// - precision value itself
	// - using round(), floor() or ceil() to calculate width and padding (cell gutter)
	//
	// Tests have shown these behaviours:
	//
	// - Using precision < 3:
	//     - We get inaccurate values with round(), floor(), and ceil()
	// - Using precision = 3:
	//     - We get inaccurate values in Safari when using floor(),
	//     - We get inaccurate values with round() and ceil() which leads to jumping cells,
	//       with round() starting in containers larger than ~800px (FF)
	// - Using precision = 4:
	//     - We get inaccurate values in Safari when using round() and floor()
	//     - We get an overall good behaviour when using ceil(),
	//       cells will start jumping in containers larger than ~2200px (FF)
	// - Using precision > 4:
	//     - We get inaccurate values in Safari with round() and floor()
	//     - We get an overall good behaviour when using ceil()
	//
	// Recommendation:
	// Using a float precision of 5 together with ceil() seems to be the smallest possible,
	// most accurate amount for a future-proof grid system.
	$precision: 5;

	@if $type == 'ceil' {
		@return ceil($val * _pow(10, $precision)) / _pow(10, $precision);
	} @else if $type == 'floor' {
		@return floor($val * _pow(10, $precision)) / _pow(10, $precision);
	} @else {
		@return round($val * _pow(10, $precision)) / _pow(10, $precision);
	}
}

@function grid-config-get($setting) {
	@return map-get($spartan-config, $setting);
}

@function get-formatted-namespace() {
	$namespace: map-get($spartan-config, 'namespace');

	@return if($namespace != '', #{$namespace}-, $namespace);
}

@mixin _spartan-span-width($num) {
	width: _get-rounded(map-get($spartan-config, 'singleCell') * $num, 'ceil');
}

@mixin _spartan-indent($num) {
	margin-left: _get-rounded(map-get($spartan-config, 'singleCell') * $num) !important;
}

@mixin _spartan-push($num) {
	position: relative;
	left: _get-rounded(map-get($spartan-config, 'singleCell') * $num);
}

@mixin _spartan-pull($num) {
	position: relative;
	right: _get-rounded(map-get($spartan-config, 'singleCell') * $num);
}

@mixin _spartan-container-gutter($gutter) {
	margin-left: _get-rounded(-$gutter) !important;
}

// assuming px, em
@mixin _spartan-cell-gutter($gutter) {
	@if unit($gutter) == '%' {
		// cell gutter has to be slightly smaller with percentage value because container is bigger
		padding-left: _get-rounded(percentage($gutter / (100% + $gutter)), 'ceil') !important;
	} @else {
		padding-left: _get-rounded($gutter, 'ceil') !important;
	}
}

@mixin _spartan-cf {
	&:before,
	&:after {
		content: '';
		display: table;
	}

	&:after {
		clear: both;
	}
}

@mixin _spartan-box-sizing($sizing: border-box) {
	box-sizing: $sizing;
}

@mixin _spartan-base-style($item) {
	@if $item == 'both' {
		display: block;
		// make sure no shorthand properties interfere with grid styles
		margin-right: 0 !important;
		padding-right: 0 !important;
	}
	@if $item == 'container' {
		@include _spartan-cf;
		padding-left: 0 !important;
	}
	@if $item == 'cell' {
		@include _spartan-box-sizing;
		float: left;
		margin-left: 0 !important;
		// cells should per default span the whole width if none is set
		width: map-get($spartan-config, 'width');
		min-height: 1px;
	}
}

// clear every new grid line, see issue in "before" state here: http://stackoverflow.com/questions/3628311/css-floating-divs-with-different-height-are-aligned-with-space-between-them
@mixin grid-cell-clear($cells) {
	$cell-integer: floor($cells);

	& > .#{get-formatted-namespace()}cell:nth-of-type(#{$cell-integer}n+1) {
		clear: left;
	}
}

@mixin _grid-cell-vertical-spacing($cells, $spacing: false, $direction: 'between') {
	@if $spacing {
		@if $direction == 'between' {
			@if ($cells > 0) {
				$cell-integer: floor($cells);

				&:nth-of-type(n+#{$cell-integer + 1}) {
					margin-top: $spacing;
				}
			}
		}
		@if $direction == 'before' {
			margin-top: $spacing;
		}
		@if $direction == 'after' {
			margin-bottom: $spacing;
		}
	}
}

@mixin _spartan-gutter-styles($container-gutter, $cell-gutter) {
	&.#{get-formatted-namespace()}container {
		@include _spartan-container-gutter($container-gutter);

		> .#{get-formatted-namespace()}cell {
			@include _spartan-cell-gutter($cell-gutter);
		}
	}
}

// base grid layout styles, valid for every grid setup
@mixin _spartan-core-selectors {
	.#{get-formatted-namespace()}container,
	.#{get-formatted-namespace()}cell {
		@include _spartan-base-style('both');
	}

	.#{get-formatted-namespace()}container {
		@include _spartan-base-style('container');
	}

	.#{get-formatted-namespace()}cell {
		@include _spartan-base-style('cell');
	}
}

@mixin _spartan-apply($selector, $index) {
	@if $selector == 'span' {
		@include grid-span($index);
	}
	@if $selector == 'offset' {
		@include grid-offset($index);
	}
	@if $selector == 'push' {
		@include grid-push($index);
	}
	@if $selector == 'pull' {
		@include grid-pull($index);
	}
}

@mixin _update-spartan-config($settings) {
	$spartan-config: map-merge($spartan-config, $settings) !global;
}

@mixin grid-config-set($setting, $value: false) {
	@if type_of($setting) != map {
		$setting: ($setting: $value);
	}

	@include _update-spartan-config($setting);

	// always try to recalculate singleCell value
	@if map_has_key($spartan-config, 'width') and map_has_key($spartan-config, 'cells') {
		@include _update-spartan-config((singleCell: (map-get($spartan-config, 'width') / map-get($spartan-config, 'cells'))));
	}
}

@mixin grid-unlock($width: 100%, $gutter: 0, $cells: 12, $namespace: 'g') {
	$config: $width;
	$base-config: (width: 100%, gutter: 0, cells: 12, namespace: 'g');
	$target-config: ();
	$config-type: type_of($config);

	// check config type and handle settings accordingly
	@if $config-type == list {
		$settings: map-keys($base-config);

		@each $setting in $settings {
			$index: index($settings, $setting);

			@if $index and length($config) >= $index {
				$keyword: nth(map-keys($base-config), $index);
				$target-config: map-merge($target-config, ($keyword: nth($config, $index)));
			}
		}
	} @else if $config-type == map {
		$target-config: map-merge($target-config, $config);
	} @else if $config-type == number {
		$target-config: map-merge($target-config, (width: $width, gutter: $gutter, cells: $cells, namespace: $namespace));
	}

	// add fallback notices
	@if $target-config != $base-config {
		@if not map_has_key($target-config, 'width') {
			@warn 'No maximum grid width given, falling back to default (#{map-get($base-config, 'width')})';
		}

		@if not map_has_key($target-config, 'gutter') {
			@warn 'No gutter width given, falling back to default (#{map-get($base-config, 'gutter')})';
		}

		@if not map_has_key($target-config, 'cells') {
			@warn 'No cells amount given, falling back to default (#{map-get($base-config, 'cells')})';
		}
	} @else {
		@warn 'No configuration parameters given. falling back to defaults (#{map-remove($base-config, 'namespace')})';
	}

	$target-config: map-merge($base-config, $target-config);

	$width: map-get($target-config, 'width');
	$cells: map-get($target-config, 'cells');

	// check final settings types
	@if type_of($width) != number {
		@error 'Maximum grid width is not a number'
	}

	@if type_of($gutter) != number {
		@error 'Gutter width is not a number'
	}

	@if type_of($cells) != number {
		@error 'Cells amount is not a number'
	}

	$single-cell: $width / $cells;

	$target-config: map-merge($target-config, (singleCell: ($width / $cells)));

	@include grid-config-set($target-config);
}

@mixin grid-span($num: 0) {
	@if $num > 0 {
		@include _spartan-span-width($num);
	}
}

@mixin grid-offset($num: 0) {
	@include _spartan-indent($num);
}

@mixin grid-push($num: 0) {
	@if $num > 0 {
		@include _spartan-push($num);
	}
}

@mixin grid-pull($num: 0) {
	@if $num > 0 {
		@include _spartan-pull($num);
	}
}

@mixin grid-reorder($num: 0) {
	@if $num >= 0 {
		@include grid-push($num);
	} @else {
		@include grid-pull(abs($num));
	}
}

@mixin grid-gutter($arg1: map-get($spartan-config, 'gutter'), $arg2: null) {
	$_width: null;
	$_gutter: null;

	@if $arg2 {
		$_width: $arg1;
		$_gutter: $arg2;
	} @else {
		$_gutter: $arg1;
	}

	@if $_width {
		@if unit($_gutter) == '%' {
			// width is given but gutter is percentage anyway
			@include _spartan-gutter-styles($_gutter, $_gutter);
		} @else {
			@if comparable($_width, $_gutter) {
				// width is given and gutter is the same unit
				@include _spartan-gutter-styles(percentage(_strip-unit($_gutter) / _strip-unit($_width)), percentage(_strip-unit($_gutter) / _strip-unit($_width + $_gutter)));
			} @else {
				@error 'width and gutter units must be the same to calculate percentage';
			}
		}
	} @else {
		// take gutter as is
		@include _spartan-gutter-styles($_gutter, $_gutter);
	}
}

@mixin grid-core($namespace: 'g') {
	$config: ();

	@if type_of($namespace) == map {
		$config: $namespace;
	} @else {
		$config: map-merge($spartan-config, (namespace: $namespace));
	}

	@include grid-config-set($config);

	@include _spartan-core-selectors;
}

// all necessary container styles with gutter
@mixin grid-container($gutter: map-get($spartan-config, 'gutter')) {
	@include _spartan-base-style('both');
	@include _spartan-base-style('container');
	@include _spartan-container-gutter($gutter);
}

// all necessary cell styles with gutter
@mixin grid-cell($gutter: map-get($spartan-config, 'gutter')) {
	@include _spartan-base-style('both');
	@include _spartan-base-style('cell');
	@include _spartan-cell-gutter($gutter);
}

@mixin grid-generate($prefix: '', $cells: map-get($spartan-config, cells)) {
	@if $prefix != '' {
		$prefix: '#{$prefix}-';
	}

	$selector: #{get-formatted-namespace()}#{$prefix};
	$classes: span offset push pull;

	@each $class in $classes {
		@for $i from 1 through $cells {
			.#{$selector}#{$class}-#{$i} {
				@include _spartan-apply($class, $i);
			}
		}
	}
}

// do everything at once
@mixin grid-bundle($config...) {
	@include grid-unlock($config...);
	@include grid-core();
	@include grid-gutter();
	@include grid-generate();
}

// standard mixin for setting cell styles
@mixin grid-cell-set($cell-name, $cell-span: 0, $offset: 0, $reorder: 0, $spacing-opts: (false)) {
	& > .#{get-formatted-namespace()}#{$cell-name} {
		@if $cell-span > 0 {
			@include grid-span($cell-span);
		}
		@if $offset != 0 {
			@include grid-offset($offset);
		}
		@if $reorder != 0 {
			@include grid-reorder($reorder);
		}
		@if $spacing-opts {
			@include _grid-cell-vertical-spacing(nth($spacing-opts, 1), nth($spacing-opts, 2), nth($spacing-opts, 3));
		}
	}
}

// predefined cell class with width, proper clearing and optional vertical spacing
@mixin grid-cell-set-equal($cell-span, $vertical-spacing: false, $spacing-direction: 'between') {
	$cell-clear: map-get($spartan-config, 'cells') / $cell-span;

	// use default cell-set mixin to generate selector
	@include grid-cell-set('cell', $cell-span, $spacing-opts: (($cell-clear, $vertical-spacing, $spacing-direction)));

	// with equal cells, clear every nth element for proper alignment
	@include grid-cell-clear($cell-clear);
}


//////////////////////////////////////////////////////////
// Grid Config
//////////////////////////////////////////////////////////

$grid-width: 100%;
$grid-gutter: 12px;
$grid-gutter-large: 32px;
$grid-cols: 12;

$grid-config: $grid-width, $grid-gutter, $grid-cols;

$grid-width-full				: $grid-cols;
$grid-width-half				: $grid-cols/2;
$grid-width-third				: $grid-cols/3;
$grid-width-quarter				: $grid-cols/4;
$grid-width-sixth				: $grid-cols/6;
$grid-width-one					: $grid-cols/$grid-cols;

@include grid-bundle($grid-config);

output.css

.g-container,
.g-cell {
  display: block;
  margin-right: 0 !important;
  padding-right: 0 !important;
}

.g-container {
  padding-left: 0 !important;
}
.g-container:before, .g-container:after {
  content: "";
  display: table;
}
.g-container:after {
  clear: both;
}

.g-cell {
  box-sizing: border-box;
  float: left;
  margin-left: 0 !important;
  width: 100%;
  min-height: 1px;
}

.g-container {
  margin-left: -12px !important;
}
.g-container > .g-cell {
  padding-left: 12px !important;
}

.g-span-1 {
  width: 8.33334%;
}

.g-span-2 {
  width: 16.66667%;
}

.g-span-3 {
  width: 25%;
}

.g-span-4 {
  width: 33.33334%;
}

.g-span-5 {
  width: 41.66667%;
}

.g-span-6 {
  width: 50%;
}

.g-span-7 {
  width: 58.33334%;
}

.g-span-8 {
  width: 66.66667%;
}

.g-span-9 {
  width: 75%;
}

.g-span-10 {
  width: 83.33334%;
}

.g-span-11 {
  width: 91.66667%;
}

.g-span-12 {
  width: 100%;
}

.g-offset-1 {
  margin-left: 8.33333% !important;
}

.g-offset-2 {
  margin-left: 16.66667% !important;
}

.g-offset-3 {
  margin-left: 25% !important;
}

.g-offset-4 {
  margin-left: 33.33333% !important;
}

.g-offset-5 {
  margin-left: 41.66667% !important;
}

.g-offset-6 {
  margin-left: 50% !important;
}

.g-offset-7 {
  margin-left: 58.33333% !important;
}

.g-offset-8 {
  margin-left: 66.66667% !important;
}

.g-offset-9 {
  margin-left: 75% !important;
}

.g-offset-10 {
  margin-left: 83.33333% !important;
}

.g-offset-11 {
  margin-left: 91.66667% !important;
}

.g-offset-12 {
  margin-left: 100% !important;
}

.g-push-1 {
  position: relative;
  left: 8.33333%;
}

.g-push-2 {
  position: relative;
  left: 16.66667%;
}

.g-push-3 {
  position: relative;
  left: 25%;
}

.g-push-4 {
  position: relative;
  left: 33.33333%;
}

.g-push-5 {
  position: relative;
  left: 41.66667%;
}

.g-push-6 {
  position: relative;
  left: 50%;
}

.g-push-7 {
  position: relative;
  left: 58.33333%;
}

.g-push-8 {
  position: relative;
  left: 66.66667%;
}

.g-push-9 {
  position: relative;
  left: 75%;
}

.g-push-10 {
  position: relative;
  left: 83.33333%;
}

.g-push-11 {
  position: relative;
  left: 91.66667%;
}

.g-push-12 {
  position: relative;
  left: 100%;
}

.g-pull-1 {
  position: relative;
  right: 8.33333%;
}

.g-pull-2 {
  position: relative;
  right: 16.66667%;
}

.g-pull-3 {
  position: relative;
  right: 25%;
}

.g-pull-4 {
  position: relative;
  right: 33.33333%;
}

.g-pull-5 {
  position: relative;
  right: 41.66667%;
}

.g-pull-6 {
  position: relative;
  right: 50%;
}

.g-pull-7 {
  position: relative;
  right: 58.33333%;
}

.g-pull-8 {
  position: relative;
  right: 66.66667%;
}

.g-pull-9 {
  position: relative;
  right: 75%;
}

.g-pull-10 {
  position: relative;
  right: 83.33333%;
}

.g-pull-11 {
  position: relative;
  right: 91.66667%;
}

.g-pull-12 {
  position: relative;
  right: 100%;
}

settings.json

{
  "sass": {
    "compiler": "dart-sass/1.32.12",
    "extensions": {},
    "syntax": "SCSS",
    "outputStyle": "expanded"
  },
  "autoprefixer": false
}