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

Question

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

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

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

Спасибо!

Answer 1

ОБНОВЛЕНИЕ: В Susy 1.0 теперь есть эта функция, встроенная с помощью at-breakpoint миксина.См. Документы на официальном сайте .

Да, вы можете!Я нахожусь в процессе внедрения этой функции в ядро ​​Сьюзи, но пока вы должны делать это самостоятельно.Вот мой подход (требуется последний компас и альфа 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;
  }
}