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

Question

我开始将一个网站从奇点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);
...

然后，我可以使用Singularity的layout()函数将这些变量传递给自定义mixin，如下。。。

// 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() mixin，从而轻松地实现我定义的任何网格。例如：

#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()混合体中进行硬编码，它们都不接受自定义变量名。这似乎有效地阻止了我定义多个网格。因此，虽然layout()混合元素仍然存在，但我不再有可以为网格和排水沟设置传递到其中的变量，从而破坏了我的自定义布局包装器混合元素。

我已经在Github上发布了这一问题，我知道可能正在进行更永久的修复。但与此同时，我希望有一个变通方法，我可以使用当前发布的奇点来完成多个网格。

Answer 1

看起来我可以通过重写add-grid（）、add-gutter（）和add-gutter-style（）混合来实现我想要的东西，如下所示：

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

给了我变量，我可以将这些变量传递到布局函数中。现在一切似乎都在起作用，除了排水沟风格，它似乎对输出没有任何影响，但这是另一个问题。