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

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

HTML:

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

СКСС:

$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


css responsive-design sass breakpoint-sass susy-sass
person sbham    schedule 22.12.2015    source источник

Ответы (2)


arrow_upward
0
arrow_downward

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

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

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

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

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

    .secondary{
        @include span(12);
    }
}
person Miriam Suzanne    schedule 23.12.2015

arrow_upward
0
arrow_downward

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

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

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

person alex bennett    schedule 23.12.2015