Susy 2和断点

Question

我终于从Susy One过渡到Susy 2，并且一直在为新的语法而苦苦挣扎。具体地说，就是将其与断点混合使用。

在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>

这个模式可以移植到Susy2上吗？我需要为我的3个断点创建3个单独的$susy映射吗？

Answer 1

在您的示例中，不同断点处唯一变化的是基于总列数的容器的大小(Susy2没有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;
}