Запрос медиа-макета Susy Columns

Question

Недавно я использовал Compass Susy в нескольких проектах, и у меня возникло несколько вопросов, которые мне приходили в голову, теперь я пробовал это пару раз.

Кстати, я начинаю как рабочий процесс на рабочем столе.

В этих проектах я установил ширину столбцов по умолчанию, желоба и т. Д.

Допустим, у меня есть сетка из 12 столбцов 90px с желобами 10px

Затем, когда я получаю медиа-запрос для мобильных устройств, скажем, что я хочу сетку из 4 столбцов, у меня есть медиа-макет, такой как:

@include at-breakpoint($mobile) { // Стили здесь}

Что меня действительно запутало, так это то, что я не понимаю макеты СМИ. Если я укажу в макете мультимедиа, что я хочу 4 столбца с минимальной шириной 480 пикселей, то как он узнает, какая ширина столбцов или какая ширина желоба я хочу. Я предполагаю, что он использует значения по умолчанию. Это то, что он использует?

Чтобы обойти это, для каждого медиа-запроса мне пришлось установить медиа-запрос, охватить столбцы, а затем использовать миксин with-grid-settings, чтобы указать новую сетку, а затем снова включить контейнер.

Возможно, я просто получаю неправильный конец клюшки. Может ли кто-нибудь объяснить, как это работает и как мне следует правильно использовать Сьюзи?

Спасибо

Answer 1

Ты прав. at-breakpoint не предназначено, чтобы дать вам совершенно новые настройки сетки при каждом размере - только для изменения количества столбцов. with-grid-settings является правильным инструментом для изменения настроек сетки, и они оба хорошо работают вместе, если вам нужно изменить настройки сетки с разными размерами.

@include at-breakpoint($mobile) { 
  @include with-grid-settings(4,3em,2em,1em) { // styles here }
}

Там в настоящее время нет ярлыка для этого.