Susy: Временно измените настройки желоба, используя With-Layout

Question

У меня есть два отдельных изображения рядом друг с другом, и я хочу, чтобы они были смежными. Проблема в том, что мне нужно переместить самое правое изображение влево. Я мог бы использовать модификаторы размера для mixin span(narrow | wide), но это изменило бы пропорции двух соответствующих изображений относительно одного antoher.

Вместо этого нужно перенести второе изображение в обтекании влево, временно удалив водосточный желоб.

Я прочитал от своего старого поста здесь: https://stackoverflow.com/a/13044025, что я могу использовать with-grid-settings, который теперь with-layout.

Однако там, кажется, не будет какой-либо документации о том, как выполнить это конкретное действие.

Каким будет правильный способ выполнения такой задачи?

Заранее спасибо

--EDIT--

HTML (упрощенный)

<main id="grid"> 
<section id="main_background_container"> 
    <img id="main_side_img"></img> 
    <div id="main_primary_container"></div> 
</section> 
</main> 

SCSS

#grid{ 
@include container(8); 
@include background-grid; 
} 
#main_background_container{ 
@extend %debug; 
@include span(8); 
height: auto; 
float: right; 
margin-top:-16px; 
} 
#main_side_img{ 
height: 65%;  
@include span(1 no gutter); 
} 
#main_primary_container{ 
@include span(4 wide); 
background-image: url('../images/background-2b.png'); 
background-position: top; 
background-size: cover; 
height: 65%; 
} 

Answer 1

with-layout mixin принимает любое определение макета, используя карту настроек, или сокращенный синтаксис, или любую комбинацию из двух, аналогичную другим смесям Susy. Но я не думаю, что это то, что вы хотите. Изменение размера желоба фактически изменяет математику сетки, и ваши элементы не выравниваются. Я думаю, что вам нужно что-то вроде этого (я делаю все, потому что не вижу ваш код):

.left-area { 
    @include span(3 no-gutter); // remove the gutter here 
} 

.right-area { 
    @include span(9 wide); // span across what would have been the gutter 
}