【问题标题】:Susy: Temporarily modify gutter settings using With-LayoutSusy:使用 With-Layout 临时修改装订线设置
【发布时间】:2015-09-21 14:45:47
【问题描述】:

我有两张彼此相邻的单独图像,我希望它们是连续的。问题是我需要将最右边的图像移到左边。我可以对span mixin (narrow | wide ) 使用尺寸修饰符,但这会改变两个图像相对于一个图像的比例。

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

我从他的旧帖子中读到:https://stackoverflow.com/a/13044025 我可以使用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%;
}

【问题讨论】:

    标签: susy susy-sass


    【解决方案1】:

    with-layout mixin 接受使用设置映射、简写语法或两者的任意组合的任何布局定义——类似于其他 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
    }
    

    【讨论】:

    • no-gutter 需要破折号。你有no gutter。您还可以进行一些简化。见my demo on SassMeister。您还可以翻转哪个元素有wide,哪个元素有no-gutter,将排水沟放在另一个元素内。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2023-03-03
    • 1970-01-01
    • 1970-01-01
    • 2015-09-04
    • 2011-10-29
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多