////////////////////////////// // Wrapper mixin for overriding the global contexts as a block ////////////////////////////// @mixin layout($grid: false, $gutter: false, $output-style: false, $gutter-style: false) { // Private holder for current global context $layout-private-grid-holder: sgs-get('grids'); $layout-private-gutter-holder: sgs-get('gutters'); $layout-private-output-holder: sgs-get('output'); $layout-private-gutter-style-holder: sgs-get('gutter styles'); // Overides current global contexts, but only if needed @if $grid != false { @include sgs-reset('grids'); @if type-of($grid) != 'map' { @include sgs-change('grids', (-1px: $grid)); } @else { @include sgs-change('grids', $grid); } } @if $gutter != false { @include sgs-reset('gutters'); @if type-of($gutter) != 'map' { @include sgs-change('gutters', (-1px: $gutter)); } @else { @include sgs-change('gutters', $gutter); } } @if $output-style != false { @include sgs-reset('output'); @include sgs-change('output', $output-style); } @if $gutter-style != false { @include sgs-reset('gutter styles'); @if type-of($gutter-style) != 'map' { @include sgs-change('gutter styles', (-1px: $gutter-style)); } @else { @include sgs-change('gutter styles', $gutter-style); } } // All the things! @content; // REset ALL the settings @include sgs-reset('grids'); @include sgs-reset('gutters'); @include sgs-reset('output'); @include sgs-reset('gutter styles'); // Resets global contexts @include sgs-change('grids', $layout-private-grid-holder); @include sgs-change('gutters', $layout-private-gutter-holder); @include sgs-change('output', $layout-private-output-holder); @include sgs-change('gutter styles', $layout-private-gutter-style-holder); } ////////////////////////////// // Layout At // Wrapper mixin for a combined Breakpoint/Layout call ////////////////////////////// @mixin layout-at($layout, $breakpoint) { @include breakpoint($breakpoint) { // If a single value is passed in, assume it's a grid @if type-of($layout) != map { @include layout($layout) { @content; } } // If it is a map, we've got key/values to work with @else { $grid: false; $gutter: false; $output-style: false; $gutter-style: false; @if map-has-key($layout, 'grid') { $grid: map-get($layout, 'grid'); } @if map-has-key($layout, 'gutter') { $gutter: map-get($layout, 'gutter'); } @if map-has-key($layout, 'output style') { $output-style: map-get($layout, 'output style'); } @if map-has-key($layout, 'gutter style') { $gutter-style: map-get($layout, 'gutter style'); } @include layout($grid, $gutter, $output-style, $gutter-style) { @content; } } } }