css - Susy 排水沟(以像素为单位)

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，因此列宽设置将仅用于装订线，而不用于列。