Define multiple grids in Singularitygs v1.4 - sass

Question

I started upgrading a website from Singularity 1.1.2 to 1.4.0 and immediately hit a wall when it came to using multiple grids in the same style sheets. I have five different grids on this site. Previously I was able to set variables for each of the grids and gutters, like so...
$copy-grids: 2;
$copy-grids: add-grid(4 at $breakpoint-xs-min, $copy-grids);
$copy-grids: add-grid(6 at $breakpoint-l-min, $copy-grids);
$copy-gutters: $gutter-width;
$front-grids: 1;
$front-grids: add-grid(2 at $breakpoint-2up-min, $front-grids);
$front-grids: add-grid(3 at $breakpoint-3up-min, $front-grids);
$front-grids: add-grid(4 at $breakpoint-4up-min, $front-grids);
$front-gutters: breakpoint-to-base-em($front-gutter-width);
...
Then I was able to pass these variables to custom mixins using Singularity's layout() function, like this...
// Mixins for the main content body copy.
#mixin copy-layout {
#include layout($copy-grids, $copy-gutters) {
// All the things!
#content;
}
}
#mixin copy-grid-span($span, $location) {
#include copy-layout {
#include grid-span($span, $location);
}
}
// Mixins for the front page.
#mixin front-layout {
#include layout($front-grids, $front-gutters) {
$gutter-styles: 'split' 'fixed';
// All the things!
#content;
}
}
#mixin front-grid-span($span, $location) {
#include front-layout {
#include grid-span($span, $location);
}
}
...
This let me use my custom mixins in place of the standard grid-span() mixins to easily implement any of my defined grids. For instance:
#block-bean-front-page-message {
margin-bottom: $front-gutters;
#include breakpoint-1up() {
width: 100%;
padding: 0 $front-gutters/2;
}
#include breakpoint-2up-to-4up() {
#include front-grid-span(1, 2);
}
#include breakpoint-4up(true) {
#include front-grid-span(3, 2);
}
}
The problem is that, in Singularity v1.4, grid and gutter settings are no longer saved to normal sass variables. Instead they are saved as keyed values in the global $Singularity-Settings map. The keys used for these values are hard coded in the add-grid(), add-gutter(), and add-gutter-style() mixins, none of which accept a custom variable name. This appears to effectively prevent me from defining more than one grid. So while the layout() mixin still exists, I no longer have variables I can pass into it for my grid and gutter settings, breakng my custom layout wrapper mixins.
I've posted this as an issue on Github and I understand a more permanent fix may be in the works. But in the mean time, I'm hoping there is a workaround I can use to accomplish multiple grids using the current release of Singularity.

Answer 1

It looks like I'm able to achieve what I'm after by overriding the add-grid(), add-gutter(), and add-gutter-style() mixins like so:
#mixin add-grid($grid-definition, $grid-key: 'grids') {
$Grid-Map: ();
#if sgs-has($grid-key) {
$Grid-Map: sgs-get($grid-key);
}
#else {
$New-Map: sgs-set($grid-key, $Grid-Map)
}
$Add-Grid: add-grid($grid-definition, $Grid-Map);
$HOLDER: sgs-set($grid-key, $Add-Grid);
}
#mixin add-gutter($gutter-definition, $gutter-key: 'gutters') {
$Gutter-Map: ();
#if sgs-has($gutter-key) {
$Gutter-Map: sgs-get($gutter-key);
}
#else {
$New-Map: sgs-set($gutter-key, $Gutter-Map)
}
$Add-Gutter: add-gutter($gutter-definition, $Gutter-Map);
$HOLDER: sgs-set($gutter-key, $Add-Gutter);
}
#mixin add-gutter-style($gutter-style-definition, $gutter-style-key: 'gutter styles') {
$Gutter-Style-Map: ();
#if sgs-has($gutter-style-key) {
$Gutter-Style-Map: sgs-get($gutter-style-key);
}
#else {
$New-Map: sgs-set($gutter-style-key, $Gutter-Style-Map)
}
$Add-Gutter-Style: add-gutter-style($gutter-style-definition, $Gutter-Style-Map);
$HOLDER: sgs-set($gutter-style-key, $Add-Gutter-Style);
}
Then I can define my grids like this...
#include add-grid(2, 'copy grids');
#include add-grid(4 at $breakpoint-xs-min, 'copy grids');
#include add-grid(6 at $breakpoint-l-min, 'copy grids');
$copy-grids: sgs-get('copy grids');
#include add-gutter($gutter-width, 'copy gutters');
$copy-gutters: sgs-get('copy gutters');
#include add-grid(2, 'front grids');
#include add-grid(2 at $breakpoint-2up-min, 'front grids');
#include add-grid(3 at $breakpoint-3up-min, 'front grids');
#include add-grid(4 at $breakpoint-4up-min, 'front grids');
$front-grids: sgs-get('front grids');
#include add-gutter($front-gutter-width-em, 'front gutters');
$front-gutters: sgs-get('front gutters');
$front-gutter-styles: 'split' 'fixed';
...giving me variables which I can pass into the layout function. Right now everything seems to be working, except for the gutter styles, which don't seem to have any effect on output, but that's a different issue.