Susy правильный способ переключения настроек сетки в точке останова

Я пытаюсь определить некоторые поведения по умолчанию для сетки, а затем переопределить их в определенных точках останова. В следующем примере я хотел бы, чтобы два div были сложены друг на друга, с немного измененными настройками желоба по умолчанию, а затем на 800px и выше, я хотел бы, чтобы div складывались рядом друг с другом. Второй части не бывает. Похоже, что некоторые настройки полей из сценария менее 800 пикселей применяются к сценарию более 800 пикселей. Пожалуйста, дайте мне знать, как это кодировать, и придерживайтесь лучших рекомендаций.

HTML:

<div class="container">
    <div class="primary">
        <p>I am Primary</p>
    </div>
    <div class="secondary">
        <p>I am Secondary</p>
    </div>
</div>

SCSS:

$susy:
(
  flow: ltr,
  output: float,
  math: fluid,
  column-width: false,
  container: 1200px,
  container-position: center,
  last-flow: to, columns: 12,
  gutters: 1 / 4,
  gutter-position: after,
  global-box-sizing: border-box,
  debug: (
    image: hide,
    color: rgba(#66f, 0.25),
    spot: background, toggle: bottom right)
  );

* {
    @include box-sizing(border-box);
}

.container{
    @include container;
}

.primary{
    background-color: red;
}

.secondary{
    background-color: blue;
}

// Mobile first layout with slightly different
// gutter settings from default
@include with-layout(12 0.5 split){

    .primary{
        @include span(12);
    }

    .secondary{
        @include span(12);
    }
}

// this layout should take over at 800px and above
// and share a row but instead boxes end up on different
// rows
@include susy-breakpoint(800px, $susy)
{
    .primary{
        @include span(first 6);
    }

    .secondary{
        @include span(last 6);
    }
}

Я также сделал пример codepen, который можно найти здесь:

http://codepen.io/sbonham/pen/vLKvMJ

Источник

2 ответа

Решение

Да, Сьюзи просто пишет значения CSS, так что вы должны справиться с этим так же, как с простым CSS. Сьюзи не знает вашу DOM, поэтому не может знать, что вы хотите переопределить значения, которые вы установили ранее. Если бы мы предполагали, что вы всегда хотите переопределить, мы должны были бы выводить код с огромным раздуванием.

Здесь есть два решения:

  • Поместите свой небольшой экран внутри max-width Медиа-запрос, поэтому он не влияет на большие экраны.
  • Или: переопределить эти глобальные значения внутри медиа-запроса на большом экране. Проблема, которую нужно исправить - это дополнительные поля, добавленные вашим начальным split желоба.

Я предпочитаю первое решение, потому что я думаю, что переопределения уродливы. Но если вы имеете дело с некоторыми небольшими браузерами, которые не поддерживают медиа-запросы (они все еще существуют?), То вам нужно будет использовать второе решение. Пытаться:

@include susy-breakpoint(max-width 800px, 12 0.5 split) {
    .primary{
        @include span(12);
    }

    .secondary{
        @include span(12);
    }
}
Источник

Это похоже на взлом, но, надеюсь, вы получите что-то из этого! Я добавил следующее в ваш кодекс:

.primary, .secondary {
  display: inline-block;
  margin: gutter(12);
  width: span(12);
  width:500px;
}

http://codepen.io/alexG53090/pen/wMWNzR

Источник
Другие вопросы по тегам