Foundation 6 XY网格构建语义响应语法

Question

因此，我决定不使用默认类在网站上构建组件。

我正在使用“ Building Semantically”语法，但是我认为我必须做错了什么，因此下面是我组件的HTML Mock，为了进行比较，我使用默认类来确保它正常地正常运行。

我设法使它复制包括边距间距的布局，但是如果我希望在较小/较大的屏幕尺寸上减小边距，我似乎需要定义一个断点，我要做到这一点而不必包含断点？

我以为这会减小大小，因为我真的不想为此添加一个全部断点吗？

因此，如果您不包括断点，则边距大小将保持不变，而默认类会根据大小而变化，从而使所有内容脱节

HTML样机

 <div class="contain">
    <div class="wrapper">
        <div class="site-header__logo">
            Test
        </div>
    </div>
    <div class="grid-x grid-margin-x">
      <div class="cell">
            Test
      </div>
    </div>
</div>

SCSS

.contain {
   @include xy-grid-container;
}

.wrapper {
    @include xy-grid();
    @include xy-gutters($negative: true);
}

.site-header__logo {
    @include xy-cell(2);
    @include breakpoint(medium up) {
        @include xy-cell(2, $breakpoint: medium);
    }
}