Используйте разные конфигурации Susy на разных точках останова

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

Это мой код _variables.scss:

// Susy Sass Grid System Config
$susy: (
  columns: 12,
  column-width: 45px,
  global-box-sizing: border-box,
  gutters: 18px / 45px,
  gutter-position: inside,
  math: static,
  output: float,
);

$susy-desktop: (
  columns: 12,
  column-width: 67px,
  global-box-sizing: border-box,
  gutters: 30px / 67px,
  gutter-position: inside,
  math: static,
  output: float,
);

@include susy-breakpoint(1200px, $susy-desktop, false);

Как я могу получить конфигурацию $susy-desktop при ширине 1200 пикселей. Миксин не работает. Нормальная конфигурация $susy работает правильно.

Если вам нужна дополнительная информация, пожалуйста, сообщите мне и большое спасибо за ваше время! ;)


responsive-design sass grid-layout susy
person pablocarmona    schedule 27.06.2017    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Примесь susy-breakpoint - это оболочка, ожидающая содержимого. Он добавит медиа-запрос и изменит настройки для всего переданного в него:

@include susy-breakpoint(1200px, $susy-desktop, false) {
  /* This code will use the $susy-desktop settings at 1200px */
  @include span(3);
}

Использование susy-breakpoint без передачи содержимого не даст никакого эффекта.

person Miriam Suzanne    schedule 27.06.2017
comment
Спасибо за ваш ответ! Очень помогает! ;) - person pablocarmona; 30.06.2017