Question

我终于从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地图？

Answer 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;
}

Susy 2和Breakpoint

1 个答案: