Susy желоба в пикселях

Могу ли я поставить желоба в пикселях?

Я пытался поместить пиксели в переменную желоба, но получаю сообщение об ошибке.

Я делаю простой пример.

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

Если возможно, могу ли я объединить эти желоба с разными контейнерами (проценты, пиксели)?


person Виталий Леонов    schedule 20.09.2015    source источник


Ответы (1)


да. Вам нужно установить gutter-position в inside-static, а затем установить column-width для расчета желобов на основе. Поскольку для параметра math установлено значение fluid, параметр ширины столбца будет использоваться только для желобов, а не для столбцов.

person Miriam Suzanne    schedule 21.09.2015