// Background Grid Syntax // ======================
$susy-overlay-grid-head-exists: false;
// Show Grid/s // ———– // Show grid on any element using either background or overlay. // - [$grid] : <settings> @mixin show-grid(
$grid: $susy
) {
$inspect: $grid; $_output: debug-get(output, $grid); @include susy-inspect(show-grid, $inspect); @if $_output == overlay and susy-get(debug image, $grid) != hide { @include overlay-grid($grid); } @else { @include background-grid($grid); }
}
@mixin show-grids(
$grid: $susy
) {
@include show-grid($grid);
}
// Background Grid // ————— // Show a grid background on any element. // - [$grid] : <settings> @mixin background-grid(
$grid: $susy
) {
$inspect : $grid; $_output : get-background($grid); @if length($_output) > 0 { $_flow: susy-get(flow, $grid); $_image: (); @each $name, $layer in map-get($_output, image) { $_direction: if($name == baseline, to bottom, to to($_flow)); $_image: append($_image, linear-gradient($_direction, $layer), comma); } $_output: map-merge($_output, (image: $_image)); @include background-grid-output($_output...); @include susy-inspect(background-grid, $inspect); }
}
// Overlay Grid // ———— // Generate an icon to trigger grid-overlays on any given elements. // $grids… : <selector> [<settings>] [, <selector>]* @mixin overlay-grid (
$grid: $susy
) {
@if not($susy-overlay-grid-head-exists) { @at-root head { @include overlay-head($grid); } @at-root head:before { @include overlay-trigger; } @at-root head:hover { @include overlay-trigger-hover; } $susy-overlay-grid-head-exists: true !global; } head:hover ~ &, head:hover ~ body & { position: relative; &:before { @include grid-overlay-base; @include background-grid($grid); } }
}
// [Private] Overlay Trigger // ————————- @mixin overlay-trigger {
content: "|||"; display: block; padding: 5px 10px; font: { family: sans-serif; size: 16px; weight: bold; }
}
// [Private] Overlay Trigger Hover // ——————————- @mixin overlay-trigger-hover {
background: rgba(white, .5); color: red;
}
// [Private] Overlay Head // ———————- // <head> styles to create grid overlay toggle @mixin overlay-head (
$grid: $susy
) {
$_toggle: debug-get(toggle, $grid); $_horz: null; $_vert: null; @each $side in $_toggle { $_horz: if($side == left or $side == right, $side, $_horz); $_vert: if($side == top or $side == bottom, $side, $_vert); } display: block; position: fixed; #{$_horz}: 10px; #{$_vert}: 10px; z-index: 999; color: #333; background: rgba(white, .25);
}
// [Private] Grid Overlay Base // ————————— // Base styles for generating a grid overlay @mixin grid-overlay-base() {
position: absolute; top: 0; left: 0; bottom: 0; right: 0; content: " "; z-index: 998;
}
// Get Symmetrical Background // ————————– // - $grid: <map> @function get-background-sym(
$grid
) {
$grid : parse-grid($grid); $_gutters : susy-get(gutters, $grid); $_column-width : susy-get(column-width, $grid); $_math : susy-get(math, $grid); $_color : debug-get(color); $_trans : transparent; $_light : lighten($_color, 15%); $_end : 1 + $_gutters; $_after : percentage(1/$_end); $_stops : (); $_size : span(1 $grid wide); @if is-inside($grid) { $_stops: $_color, $_light; } @else if is-split($grid) { $_split: $_gutters/2; $_before: percentage($_split/$_end); $_after: percentage((1 + $_split)/$_end); $_stops: $_trans $_before, $_color $_before, $_light $_after, $_trans $_after; } @else { $_stops: $_color, $_light $_after, $_trans $_after; } @if $_math == static { $_size: valid-column-math($_math, $_column-width) * $_end; } $_output: ( image: (columns: $_stops), size: $_size, ); @return $_output;
}
// Get Asymmetrical Inside // ———————– // - $grid: <settings> @function get-asym-inside(
$grid
) {
$grid : parse-grid($grid); $_columns : susy-get(columns, $grid); $_color : debug-get(color); $_light : lighten($_color, 15%); $_stops : (); @for $location from 1 through susy-count($_columns) { $this-stop: (); @if $location == 1 { $this-stop: append($this-stop, $_color, comma); } @else { $start: parse-span(1 at $location $grid); $start: get-isolation($start); $this-stop: append($this-stop, $_color $start, comma); } @if $location == susy-count($_columns) { $this-stop: append($this-stop, $_light, comma); } @else { $_end: parse-span(1 at ($location + 1) $grid); $_end: get-isolation($_end); $this-stop: append($this-stop, $_light $_end, comma); } $_stops: join($_stops, $this-stop, comma); } @return $_stops;
}
// Get Asymmetrical Split // ———————- // - $grid: <settings> @function get-asym-split(
$grid
) {
$grid : parse-grid($grid); $_columns : susy-get(columns, $grid); $_color : debug-get(color); $_light : lighten($_color, 15%); $_stops : (); @for $location from 1 through susy-count($_columns) { $this-stop: (); $start: parse-span(1 at $location $grid); $start: get-isolation($start); $this-stop: append($this-stop, transparent $start, comma); $this-stop: append($this-stop, $_color $start, comma); $_end: $start + span(1 at $location $grid); $this-stop: append($this-stop, $_light $_end, comma); $this-stop: append($this-stop, transparent $_end, comma); $_stops: join($_stops, $this-stop, comma); } @return $_stops;
}
// Get Asymmetrical Outside // ———————— // - $grid: <settings> @function get-asym-outside(
$grid
) {
$grid : parse-grid($grid); $_columns : susy-get(columns, $grid); $_color : debug-get(color); $_light : lighten($_color, 15%); $_trans : transparent; $_stops : (); @for $location from 1 through susy-count($_columns) { $this-stop: (); @if $location == 1 { $this-stop: append($this-stop, $_color, comma); } @else { $start: parse-span(1 at $location $grid); $start: get-isolation($start); $this-stop: append($this-stop, $_color $start, comma); } @if $location == susy-count($_columns) { $this-stop: append($this-stop, $_light, comma); } @else { $gutter: get-span-width(first $location $grid); $_end: parse-span(1 at ($location + 1) $grid); $_end: get-isolation($_end); $gutter: $_light $gutter, $_trans $gutter, $_trans $_end; $this-stop: join($this-stop, $gutter, comma); } $_stops: join($_stops, $this-stop, comma); } @return $_stops;
}
// Get Asymmetrical Background // ————————— // - $grid: <settings> @function get-background-asym(
$grid
) {
$_stops: (); @if is-inside($grid) { $_stops: get-asym-inside($grid); } @else if is-split($grid) { $_stops: get-asym-split($grid); } @else { $_stops: get-asym-outside($grid); } @return (image: (columns: $_stops));
}
// Get Background // ————– // - $grid: <settings> @function get-background(
$grid
) {
$grid : parse-grid($grid); $_show : susy-get(debug image, $grid); $_return : (); @if $_show and $_show != 'hide' { $_columns: susy-get(columns, $grid); @if $_show != 'show-baseline' { $_sym: is-symmetrical($_columns); $_return: if($_sym, get-background-sym($grid), get-background-asym($grid)); $_return: map-merge($_return, (clip: content-box)); } @if $_show != 'show-columns' and global-variable-exists(base-line-height) and type-of($base-line-height) == 'number' and not unitless($base-line-height) { $_color: variable-exists('grid-background-baseline-color'); $_color: if($_color, $grid-background-baseline-color, #000); $_image: map-get($_return, image); $_size: map-get($_return, size); $_baseline: (baseline: ($_color 1px, transparent 1px)); $_baseline-size: 100% $base-line-height; $_return: map-merge($_return, ( image: if($_image, map-merge($_image, $_baseline), $_baseline), size: if($_size, ($_size, $_baseline-size), $_baseline-size), )); @if $_show == 'show' { $_clip: map-get($_return, clip); $_return: map-merge($_return, (clip: join($_clip, border-box, comma))); } } @else if $_show == 'show-baseline' { @warn 'Please provide a $base-line-height with the desired height and units'; } } @if map-get($_return, image) { $_return: map-merge($_return, (flow: susy-get(flow, $grid))); } @return $_return;
}
// Get Debug // ——— // Return the value of a debug setting // - $key: <setting> @function debug-get(
$key, $grid: $susy
) {
$key: join(debug, $key, space); @return susy-get($key, $grid);
}