Susy 2 и Breakpoint

Question

Я, наконец, перехожу к Susy 2 из Susy One и немного борюсь с новым синтаксисом. В частности, используя его с mixpoint Breakpoint.

В Susy One, я имел это:

// Mobile First Settings 

.grid-construct{ 
    $total-columns: $bp-sm-columns; 
    $column-width: $bp-sm-column-width; 
    $gutter-width: $bp-sm-gutter-width; 
    $grid-padding: $bp-sm-grid-padding; 
    $container-width: $bp-sm-container-width; 
    $container-style: $bp-sm-container-style; 

    @include container; 
} 


//for medium devices 

@include breakpoint($breakpoint-md) { 
    .grid-construct { 
    $total-columns: $bp-md-columns; 
    $grid-padding: $bp-md-grid-padding; 

    @include container; 
    } 
} 


// large devices 

@include breakpoint($breakpoint-lg) { 
    .grid-construct { 
    $total-columns: $bp-lg-columns; 
    $grid-padding: $bp-lg-grid-padding; 

    @include container; 
    } 
} 

Я был тогда в состоянии писать такие стили, как:

.my-style{ 
    margin-top: 10px; 

    @include breakpoint($breakpoint-md) { 
    margin-top: 20px; 
    } 

    @include breakpoint($breakpoint-lg) { 
    margin-top: 40px; 
    } 
} 

Пример моего HTML-разметки:

<div class="grid-construct"> 
    <div class="my-style"> 
    Lorem ipsum 
    </div> 
</div> 

Является ли этот шаблон переносимым для Susy 2? Должен ли я сделать 3 отдельных карты $susy для моих 3 соответствующих точек останова?

Answer 1

В вашем примере единственное, что меняется на разных контрольных точках, - это размер контейнера, основанный на количестве полных столбцов (у Susy 2 нет grid-padding, потому что вы можете легко добавить это). Если вы создали базовую $susy карту так, как вы хотите, вы можете использовать shorthand переопределить, что, как вы идете:

.grid-construct { 
    @include container; 

    @include breakpoint($breakpoint-md) { 
    max-width: container($bp-md-columns); 
    } 

    @include breakpoint($breakpoint-lg) { 
    max-width: container($bp-lg-columns); 
    } 
} 

(я использовал функцию container потому, что максимальная ширина все, что вам действительно нужно переопределение)

вы также можете использовать susy-breakpoint для изменения настроек для всего блока точки останова:

@include susy-breakpoint($breakpoint-lg, $bp-lg-columns) { 
    @include container; 
}