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

Question

Я пытаюсь определить некоторые поведения по умолчанию для сетки, а затем переопределить их в определенных точках останова. В следующем примере я хотел бы, чтобы два divs были сложены друг на друга, со слегка измененными настройками желоба от значения по умолчанию, а затем в 800 пикселей и выше я хотел бы, чтобы divs складывались рядом друг с другом. Второй части не бывает. Похоже, что некоторые настройки полей из сценария менее 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

Answer 1

Да, Сюзи просто писать значения 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); 
    } 
} 

Answer 2

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

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

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