Блог

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

 $total-columns: 4;
$large: 12;

// code based on 4 columns

@include at-breakpoint($large) {
    // code based on 12 columns
}
 

Но как насчет того, когда вы хотите, чтобы количество столбцов оставалось неизменным, но (например) просто измените ширину столбца? Вот так:

 $total-columns: 12;
$column-width: 3em;

$large: 64em;
$large-column-width: 3.75em;

@include at-breakpoint($large) {
    $column-width: $large-column-width; // automagically changes previously declared column-widths.
}
 

Я бы хотел, чтобы что-либо, использующее columns() или span-columns() предшествующее точке останова, автоматически корректировало их значения в соответствии с новой шириной столбца без необходимости их повторного объявления.

Итак…

 foo { @include span-columns(4, $total-columns); }
 

не изменится в точке останова, но автоматически изменится ширина столбцов.

Возможно ли это?

Susy 2 решает эту проблему, используя новый susy-breakpoint с более мощным сокращенным синтаксисом. Но подход Susy 1 не намного сложнее. at-breakpoint Миксин — это простая оболочка для двух действий:

1. Настройте медиа-запрос.
2. Измените глобальные настройки Susy внутри этого блока медиа-запроса.

Я рекомендую загрузить Breakpoint (или другой подобный плагин) для обработки медиа-запросов, но вы также можете сделать это вручную. Susy предоставляет mixin для обработки второй части ( with-grid-settings ). Если вы соедините эти два вместе, у вас будет более мощная версия at-breakpoint .

 $large: 64em;
$large-column-width: 3.75em;

@media (min-width: $large) {
  @include with-grid-settings($column-width: $large-column-width) {
    // new column-width applied to code in here.
  }
}