Susy：使用 With-Layout 临时修改 gutter 设置

Question

我有两张单独的图片并排放置，我希望它们是连续的。问题是我需要将最右边的图像移到左边。我可以为 span mixin (narrow | wide ) 使用大小修饰符，但这会改变两个相应图像相对于一个 antoher 的比例。

相反，我需要通过暂时移除装订线将流程中的第二张图片移到左侧。

我从他的旧 post 那里读到：我可以使用 with-grid-settings,，现在是 with-layout.

但是似乎没有关于如何完成此特定操作的任何文档。

执行此类任务的正确方法是什么？

提前致谢

--编辑--

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 接受任何使用设置映射的布局定义，或 shorthand 语法，或两者的任意组合——类似于其他 Susy mixin。但我不认为那是你想要的。更改装订线大小实际上会更改网格数学，并且您的元素不会对齐。我想你想要这样的东西（我正在编造东西，因为我看不到你的代码）：

.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
}

Susy：使用 With-Layout 临时修改 gutter 设置

Susy: Temporarily modify gutter settings using With-Layout

susy-sass

susy