在Singularitygs v1.4中定义多个网格

Question

我开始将网站从Singularity 1.1.2升级到1.4.0，并立即在相同样式表中使用多个网格时遇到了问题。我在这个网站上有五个不同的网格。以前我能够设置变量对每个网格和排水沟，像这样的......

$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); 

... 

然后我就能够用奇异的layout()函数来传递这些变量来定制混入，这样的...

// 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); 
    } 
} 

... 

这让我用我的自定义mixin来代替标准的grid-span() mixins来轻松实现我定义的任何网格。例如：

#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); 
    } 
} 

问题是，在Singularity v1.4中，网格和排水沟设置不再保存到普通的sass变量。相反，它们将保存为全局$Singularity-Settings映射中的键控值。用于这些值的密钥在add-grid(),add-gutter()和add-gutter-style() mixins中进行了硬编码，其中没有一个接受自定义变量名称。这似乎有效地阻止我定义多个网格。因此，虽然mixin仍然存在，但我不再有变量可以传递给它，用于我的网格和阴影设置，从而打破了我的自定义布局包装混合。

我已经发布了这个作为issue on Github，我知道一个更永久的修复可能在工作中。但与此同时，我希望有一种解决方法可以使用当前版本的Singularity完成多个网格。

Answer 1

它看起来像我能够实现我后通过重写附加格（），附加槽（），并添加-沟式（）的混入，像这样：

@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); 
} 

然后，我可以定义我的网格这样的...

@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'; 

...给我，我可以进入布局函数变量。现在一切似乎都在起作用，除了排水沟风格，这似乎对输出没有任何影响，但这是一个不同的问题。