Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----

////
/// @group o-grid
/// @link http://registry.origami.ft.com/components/o-grid
////

// ----------------------------------------------------------------------------
// Responsive behaviour configuration
// ----------------------------------------------------------------------------

/// Silent mode
///
/// @type Bool
///
/// @link http://origami.ft.com/docs/syntax/scss/#silent-styles “Silent” styles in Origami's documentation
$o-grid-is-silent: true !default;

/// Grid mode
/// - fluid: full width until $o-grid-max-width (default: 1210px)
/// - snappy: fluid width until the layout defined in $o-grid-start-snappy-mode-at (default: M),
///           and then snaps into a larger fixed layout at each breakpoint
/// - fixed: always fixed-width with the layout defined by $o-grid-fixed-layout (default: L)
///
/// @type String - one of fluid (default), snappy, fixed
$o-grid-mode: 'fluid' !default;

/// Layout to default to when the grid has a fixed width (not fluid)
///
/// @type String - One of $o-grid-layouts
$o-grid-fixed-layout: 'L' !default;

/// When the grid start snapping between fixed-width layouts
/// in the case where a row has the `o-grid-row--snappy` class
///
/// @type String
$o-grid-start-snappy-mode-at: 'M' !default;

/// Show the currently active breakpoint and output loaded settings
/// @link https://github.com/sass-mq/sass-mq#seeing-the-currently-active-breakpoint
///
/// @type Bool
$o-grid-debug-mode: false !default;

/// Output IE 8-specific rules?
/// - false: no IE8 support at all
/// - 'only': serve code compatible with IE8 only
/// - 'inline' (default): serve IE8 specific code alongside modern browsers code
///
/// @type Bool | String
$o-grid-ie8-rules: 'inline' !default;


// ----------------------------------------------------------------------------
// Grid settings and dimensions
// ----------------------------------------------------------------------------

/// Number of columns
///
/// @type Number (unitless)
$o-grid-columns: 12 !default;

/// Gutter size, in pixels
///
/// @type Number
$o-grid-gutter: 10px !default;

/// Minimum width, in pixels
///
/// @type Number
$o-grid-min-width: 240px !default;

/// Full width of the grid: combined width of columns, gutters and outer margins
/// for a specific column width
///
/// @access private
///
/// @param {Number} column-width - desired width of a grid column
///
/// @returns {Number} width of the grid, in pixels
@function _oGridWidth($column-width) {
	$gutters-combined-width: $o-grid-gutter * ($o-grid-columns - 1) + 0px;
	$outer-margins-combined-width: $o-grid-gutter * 2 + 0px;
	@return ($column-width * $o-grid-columns) + $gutters-combined-width + $outer-margins-combined-width;
}

/// Layouts
///
/// Each layout is calculated following a specific column width,
/// in order to base breakpoints on the structure of the grid itself
///
/// @type Map
$o-grid-layouts: (
	S:  _oGridWidth($column-width: 30px), // 490px
	M:  _oGridWidth($column-width: 50px), // 730px
	L:  _oGridWidth($column-width: 70px), // 970px
	XL: _oGridWidth($column-width: 90px)  // 1210px
) !default;

/// Layout names
///
/// @access private
/// @type List
$_o-grid-layout-names: map-keys($o-grid-layouts) !default;

// When snappy mode is enabled, force $o-grid-max-width to the largest layout width
// instead of the default $o-grid-max-width
@if $o-grid-mode == 'snappy' {
	$o-grid-max-width: map-get($o-grid-layouts, nth($_o-grid-layout-names, -1)) !global;
}

/// Maximum grid width
/// Defaults to the largest layout width
///
/// @access private
/// @type Number
$_o-grid-max-width: map-get($o-grid-layouts, nth($_o-grid-layout-names, -1));

/// Current scope
///
/// @access private
/// @type String
$_o-grid-scope: 'global';


@mixin oGridAddLayout($layout-name, $column-width: null, $layout-width: null) {
	@if $column-width {
		$layout-width: _oGridWidth($column-width);
	}

	$temp-layouts: ();

	// Add the new layout in the correct position:
	// (we want $o-grid-layouts to ordered from the smallest to the largest layout)
	@for $index from 1 through length($o-grid-layouts) {
		$previous-layout-width: if($index == 1, 0, map-get($o-grid-layouts, nth($_o-grid-layout-names, $index - 1)));
		$current-layout-name: nth($_o-grid-layout-names, $index);
		$current-layout-width: map-get($o-grid-layouts, $current-layout-name);

		@if $previous-layout-width > $layout-width or $current-layout-width < $layout-width {
			$temp-layouts: map-merge($temp-layouts, ($current-layout-name: $current-layout-width));
		} @else {
			$temp-layouts: map-merge($temp-layouts, ($layout-name: $layout-width));
			$temp-layouts: map-merge($temp-layouts, ($current-layout-name: $current-layout-width));
		}
	}

	$o-grid-layouts: $temp-layouts !global;
	$_o-grid-layout-names: map-keys($o-grid-layouts) !global;
}


@include oGridAddLayout($layout-name: P, $column-width: 36px);
@include oGridAddLayout($layout-name: A, $layout-width: 300px);
@include oGridAddLayout($layout-name: XS, $column-width: 20px);


/// Output debug information about the currently loaded layouts.
///
/// @param {Map} $layouts - Map of layouts
@mixin oGridDebugInfo($layouts: $o-grid-layouts) {
	/*! DEBUG
	 * Layouts:
	 * #{inspect($layouts)}
	 */
}
@include oGridDebugInfo;

SassMeister-output.css

/*! DEBUG
 * Layouts:
 * (A: 300px, XS: 370px, S: 490px, P: 562px, M: 730px, L: 970px, XL: 1210px)
 */