以像素爲單位的Susy排水溝

Question

我可以以像素爲單位排水溝嗎？

我試圖把像素排水溝變量，但我得到一個錯誤。

我使簡單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，因此列寬設置將僅用於裝訂線，而不是列。