// Susy Next Settings // ================== // Susy Language Defaults // ---------------------- // - PRIVATE @include susy-defaults(( container: auto, math: fluid, output: float, container-position: center, gutter-position: after, global-box-sizing: content-box, debug: ( image: hide, color: rgba(#66f, .25), output: background, toggle: top right, ), )); // Valid Keyword Values // -------------------- // - PRIVATE: DONT'T TOUCH $susy-keywords: ( container: auto, math: static fluid, output: isolate float, container-position: left center right, flow: ltr rtl, gutter-position: before after split inside inside-static, box-sizing: border-box content-box, span: full, edge: first alpha last omega full, spread: narrow wide wider, gutter-override: no-gutters no-gutter, role: nest, clear: break nobreak, debug image: show hide show-columns show-baseline, debug output: background overlay, ); // User Settings // ------------- // - Define the $susy variable with a map of your own settings. // - Set EITHER $column-width OR $container // - Use $column-width for static layouts $susy: () !default; // Parse Susy Keywords and Maps // ---------------------------- @function parse-settings( $short: $susy ) { $return: (); @if type-of($short) == map { $return: $short; } @else { @each $item in $short { // strings @if type-of($item) == string { @each $key, $value in $susy-keywords { @if index($value, $item) { $return: deep-set($return, $key, $item); } } // maps } @else if type-of($item) == map { $return: map-merge($return, $item); } } } @return $return; } // Parse Columns & Gutters // ----------------------- @function parse-layout( $short ) { $return: (); $columns: (); $gutters: null; @if not unitless(nth(nth($short, 1), 1)) { $gutters: nth($short, 1); } @else { $columns: (columns: nth($short, 1)); $gutters: if(length($short) > 1, nth($short, 2), $gutters); } @if type-of($gutters) == list and length($gutters) > 0 { $gutters: ( gutters: nth($gutters, 2) / nth($gutters, 1), column-width: nth($gutters, 1), ); } @else { $gutters: if($gutters, (gutters: $gutters), ()); } $return: map-merge($return, $columns); $return: map-merge($return, $gutters); @return $return; } // Parse Grid/Context // ------------------ @function parse-grid( $short: $susy ) { $return: parse-settings($short); $layout: (); @if type-of($short) == map { $return: $short; } @else { @each $item in $short { // number or list @if type-of($item) == number or type-of($item) == list { @if type-of($item) == list or unitless($item) { $layout: append($layout, $item); } @else { $return: map-merge($return, (container: $item)); } } } $layout: if(length($layout) > 0, parse-layout($layout), $layout); } @return map-merge($return, $layout); } // Parse Span // ---------- @function parse-span( $short, $key: span ) { $return: (); @if type-of($short) == map { $return: $short; } @else { $at: index($short, at); @if $at { $loci: $at + 1; $location: nth($short, $loci); $return: map-merge($return, (location: $location)); $short: set-nth($short, $at, null); $short: set-nth($short, $loci, null); } $i: 1; $span: (); @while $i <= length($short) { $this: nth($short, $i); @if type-of($this) == number { $span: append($span, $this); $short: set-nth($short, $i, null); } @else if $this == of { $short: set-nth($short, $i, null); $i: length($short) + 1; } $i: $i + 1; } @if length($span) > 0 { $span: if(length($span) == 1, nth($span, 1), $span); $return: map-merge($return, ($key: $span)); } $return: map-merge($return, parse-grid($short)); } @return $return; } // Parse Gutters // ------------- @function parse-gutters( $short: $susy ) { $gutters: parse-span($short, gutter-override); $span: susy-get(gutter-override, $gutters); @if $span and not map-get($gutters, columns) { $context: (); $new: (); @each $item in $span { @if type-of($item) == number and unitless($item) { $context: append($context, $item); } @else { $new: append($new, $item); } } $context: parse-grid($context); $new: if(length($new) == 0, null, $new); $new: if(length($new) == 1, nth($new, 1), $new); $new: (gutter-override: if($new != $span, $new, $span)); $gutters: map-merge($gutters, $new); $gutters: map-merge($gutters, $context); } @return $gutters; } // Susy Set // -------- // Change one setting // - $key : setting name // - $value : setting value @mixin susy-set( $key, $value ) { $susy: deep-set($susy, $key, $value) !global; } // Susy Get // -------- // Return one setting from a grid // - $key : // - $layout : @function susy-get( $key, $layout: map-merge($susy-defaults, $susy) ) { $layout: parse-grid($layout); $options: $layout $susy $susy-defaults; $break: false; $return: null; @each $opt in $options { @if type-of($opt) == map and not $break { $keyset: deep-has-key($opt, $key...); @if $keyset { $return: deep-get($opt, $key...); $break: true; } } } @return $return; }