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

...給我，我可以進入佈局函數變量。現在一切似乎都在起作用，除了排水溝風格，這似乎對輸出沒有任何影響，但這是一個不同的問題。