0

我终于从 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 吗？我需要$susy为我的 3 个各自的断点制作 3 个单独的地图吗？

4

1 回答 1

0

在您的示例中，在不同断点处唯一改变的是基于总列数的容器大小（Susy 2 没有，grid-padding因为您可以自己轻松添加）。$susy如果您按照您想要的方式设置基本地图，您可以使用速记来覆盖它：

.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函数，因为 max-width 是你真正需要覆盖的全部）

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

@include susy-breakpoint($breakpoint-lg, $bp-lg-columns) {
  @include container;
}
于 2015-08-18T20:16:04.610 回答