Susy: измените количество столбцов в соответствии с размером экрана

Question

В плагине Compass/Sass, Susy, вы задаете количество столбцов в файле _base.scss.

Для рабочего стола мне нравится иметь 12 столбцов. Однако это слишком много столбцов для мобильного просмотра. Есть ли способ изменить количество столбцов для мобильного дисплея?

(Я делаю отзывчивый веб-дизайн, поэтому на рабочем столе и на мобильных версиях сайта будет использоваться один и тот же файл _base).

Спасибо!

Answer 1

UPDATE:Susy 1,0 теперь эта функция встроена в использовании at-breakpoint подмешать. См. Документы на странице the official site.

Да, вы можете! Я в процессе выпекания этой функции в ядре Susy, но пока вы должны сделать это самостоятельно. Вот мой подход (требуется последняя Compass и Sass альфа):

// for mobile layouts 
$total-cols: 4; 

.container { 
    @include container; 
} 

// for desktops 
@media all and (min-width: 30em) { 
    $total-cols: 12; 

    .container { 
    @include container; 
    } 
} 

Повторите по мере необходимости для каждой точки разрыва. Вы также можете создавать простые Примеси, чтобы помочь вам:

@mixin desktop() { 
    @media all and (min-width: 30em) { 
    $current-total: $total-cols; // remember current column setting 
    $total-cols: 12;    // change column setting for new context 

    @content;     // apply content with new column-count 

    $total-cols: $current-total; // return original column setting 
    } 
} 

.container { 
    @include container; 

    @include desktop { 
    @include container; 
    } 
}