Susy前綴，後綴，填充錯誤的輸出與內部溝槽位置

Question

我不知道prefix,suffix和pad的輸出使用gutter-position: inside時發生了什麼。例如：

$susy: (
    columns: 12, 
    gutter-position: inside, 
    global-box-sizing: border-box 
); 

body { 
    @include pad(gutter()); 
} 

的輸出是：

body { 
    padding-left: 1.6666666667%; 
    padding-right: 1.6666666667%; 
} 

並與squish混入比較：

body { 
    margin-left: 0.8333333333%; 
    margin-right: 0.8333333333%; 
} 

所需的輸出是0.8333333333%但pad仍然沒有 「分裂」。

，他們都在一起 - 本地應該輸出相同的值，但它並不：

body { 
    @include pad(gutter()); 
    @include squish(gutter()); 
} 

輸出：

body { 
    padding-left: 1.6666666667%; 
    padding-right: 1.6666666667%; 
    margin-left: 0.8333333333%; 
    margin-right: 0.8333333333%; 
} 

這是怎麼回事？

Answer 1

這些混入並不意味着用於施加排水溝（用於該@include gutter()或@include gutter(split)） - 它們都是爲了額外邊距和填充。爲了在大多數情況下做到這一點，他們嘗試維持現有的水槽，除了您要求的任何填充/邊距。在你的情況下，水槽被添加到pad而不是squish，因爲你的gutter-position是inside。你已經要求排水溝寬度，pad增加了排水溝寬度，並且最終以雙排。如果您想要使用這些mixin中的任何一個，而不包含排水溝寬度，請使用關鍵字no-gutters（pad($width no-gutters)）。