Question

我可以把排水沟放在像素中吗？

我试图将像素放在gutter变量中，但是我得到了一个错误。

我简单example。

@import "susy";

// Colors
// - - - - - - - - - - - - - - - - - -

$col: (
        _1: #96ceb4,
        _2: #ffeead,
        _3: #ff6f69,
        _4: #ffcc5c,
        _5: #88d8b0,
        _6: #ee4035,
        _7: #f37736,
        _8: #fdf498,
        _9: #7bc043,
        _10: #0392cf,
        _11: #e39e54,
        _12: #4d7358
);

// Responsive grid
// - - - - - - - - - - - - - - - - - -

$columns: 12;

$susy: (
        columns: $columns,  // The number of columns in your grid
        container: 80%,
        gutters: 1/4, // The size of a gutter in relation to a single column
        gutter-position: inside,
        math: fluid,
        output: float,
        flow: ltr,
        global-box-sizing: border-box
);

@include border-box-sizing();

html, body {
  height: 100%;
}

body {
  min-height: 100%;
}

.wrapper {
  @include container();
  min-height: 100%;
}

@for $i from 1 through $columns {
  .col-#{$i} {
    @include span($i);

    &.mod-display {
      padding-top: 20px;
      padding-bottom: 20px;
      content: '.col-#{$i}';
      background-color: map-get($col, _#{$i});
      border: 1px solid darken(map-get($col, _#{$i}), 20);
      opacity: .5;
    }
  }
}

如果可能的话，我可以将这些排水沟与不同的容器（百分比，像素）组合在一起吗？

Answer 1

是。您需要将gutter-position设置为inside-static，然后设置column-width以根据计算排水沟。由于您将math设置为fluid，因此列宽设置仅用于装订线，而不是列。

Susy排水沟以像素为单位

1 个答案: