Определите несколько сеток в 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); 

... 

Тогда я был в состоянии передать эти переменные в пользовательских Mixins с помощью функции 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); 
    } 
} 

... 

Это позволяет мне использовать мои собственные миксины вместо стандартных миксеров , чтобы легко реализовать любую из моих определенных сеток. Например:

#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, настройки сетки и водостока больше не сохраняются в нормальных переменных Сасс. Вместо этого они сохраняются как ключевые значения на глобальной карте $Singularity-Settings. Клавиши, используемые для этих значений, жестко закодированы в add-grid(), add-gutter() и add-gutter-style() mixins, ни одна из которых не принимает имя настраиваемой переменной. Это, по-видимому, эффективно мешает мне определять более одной сетки. Поэтому, пока микс layout() все еще существует, у меня больше нет переменных, которые я могу передать в него для настроек сетки и желоба, разбивая мои собственные компоновщики компоновки пакетов.

Я разместил это как 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'; 

... дает мне переменные, которые я могу передать в функцию компоновки. Сейчас все работает, за исключением стилей желобов, которые, похоже, не влияют на выход, но это другая проблема.