Foundation 6 изменяет размер желоба в небольшой точке останова

Есть ли в Foundation 6 способ изменить размер желоба в небольшой точке останова на что-то отличное от размера желоба в settings.scss? Прямо сейчас у меня $grid-column-gutter установлено значение 90 пикселей, но я бы хотел, чтобы этот размер был равен 30 пикселей, когда сайт находится в небольшой точке останова. Как лучше всего это сделать?


css sass zurb-foundation zurb-foundation-6
person Dustin    schedule 09.12.2015    source источник

Ответы (1)


arrow_upward
0
arrow_downward

У меня еще не было возможности активно работать в 6. Но я полагаю, что вы ищете некоторые комбинации миксинов, поскольку Foundation 6 уделяет немного больше внимания удалению классов из html и делает ваши файлы CSS более структурированными. Ниже приведен пример, который может вам помочь.

.columns {
  // Only affects medium screens and larger
  @include breakpoint(medium up) {
     @include grid-column($columns, 90px);
  }

  // Only affects small screens, not medium or large
  @include breakpoint(small only) {
     @include grid-column($columns, $gutter);
  }
}

Не уверен, нужно ли вам использовать разные классы или нет. Но я думаю, что это должно быть достойным началом. Получены фрагменты кода из "Grid" и "Media Queries" документации Foundation 6.

person Waterpile    schedule 11.12.2015