Susy 2 和断点答案

【问题标题】：Susy 2 and BreakpointSusy 2 和断点
【发布时间】：2015-11-10 15:59:07
【问题描述】：

我终于从 Susy One 过渡到 Susy 2 并且一直在为新语法苦苦挣扎。具体来说，将其与 Breakpoint mixin 一起使用。

在 Susy One 中，我有这个：

// Mobile First Settings

.grid-construct{
  $total-columns: $bp-sm-columns;
  $column-width: $bp-sm-column-width;
  $gutter-width: $bp-sm-gutter-width;
  $grid-padding: $bp-sm-grid-padding;
  $container-width: $bp-sm-container-width;
  $container-style: $bp-sm-container-style;

  @include container; 
}


//for medium devices

@include breakpoint($breakpoint-md) {
  .grid-construct {
    $total-columns: $bp-md-columns;
    $grid-padding: $bp-md-grid-padding;

    @include container;
  }
}


// large devices

@include breakpoint($breakpoint-lg) {
  .grid-construct {
    $total-columns: $bp-lg-columns;
    $grid-padding: $bp-lg-grid-padding;

    @include container;
  }
}

然后我可以编写如下样式：

.my-style{
  margin-top: 10px;

  @include breakpoint($breakpoint-md) {
    margin-top: 20px;
  }

  @include breakpoint($breakpoint-lg) {
    margin-top: 40px;
  }
}

我的 HTML 标记示例：

<div class="grid-construct">
  <div class="my-style">
    Lorem ipsum
  </div>
</div>

这个模式可以移植到 Susy 2 吗？我需要为我的 3 个各自的断点制作 3 个单独的 $susy 映射吗？

【问题讨论】：

我不确定您要达到的目标。您的第二个示例 (.my-style) 完全不受初始设置的影响。因为 Sass 不知道 DOM，所以设置在断点内的变量不会在类似的断点之间保持设置。但是，无论如何，第二个示例根本没有使用 Susy。第一个示例除了改变外部容器的大小之外，还意味着什么？
@EricMSuzanne 在第二个示例中，.my-style 嵌套在受 Susy 和@include container 影响的.grid-construct 中。我已经编辑了标记以反映这一点。

标签： susy susy-sass breakpoint-sass

【解决方案1】：

在您的示例中，唯一在不同断点处发生变化的是容器的大小基于总列数（Susy 2 没有grid-padding，因为您可以自己轻松添加）。如果您按照自己的方式设置基本的$susy 映射，则可以使用shorthand 随时覆盖它：

.grid-construct {
  @include container;

  @include breakpoint($breakpoint-md) {
    max-width: container($bp-md-columns);
  }

  @include breakpoint($breakpoint-lg) {
    max-width: container($bp-lg-columns);
  }
}

（我使用了container 函数，因为你真正需要覆盖的就是最大宽度）

您也可以使用susy-breakpoint 更改整个断点块的设置：

@include susy-breakpoint($breakpoint-lg, $bp-lg-columns) {
  @include container;
}

【讨论】：