我正在尝试生成跨越4个跨度的1/5的装订线。全局设置是:
$page-width: 1080px;
$susy: (
columns: 12,
math: fluid,
gutter-position: inside,
gutters: 1/4.5, // will be overriden; I think ...
global-box-sizing: border-box,
use-custom: (rem: true),
container: $page-width
);
此选择器紧随其后:
.mosaic {
// Setting gutters of 4 * 1/5 single column width,
// to be distributed 2/5 left, 2/5 right
@include gallery(4 of 12 4/5);
}
.mosaic
生成的CSS为:
.mosaic {
width: 33.33333%;
float: left;
padding-left: 1.85185%; // Expected/wanted: 3.333...%
padding-right: 1.85185%; // dito
}
我确实期望每边的填充为4/5/12(列)/ 2(边)= 1/30 = 3.333 ...%,这将导致1/5(1/10)的排水沟在列跨度的总宽度的每一侧)。
答案 0 :(得分:1)
这就是Susy的数学方法:
1
列单位宽,加上4/5
列单位的装订线。总计:1.8
21.6
.8/21.6
(目标/背景)。总计:.037037037
1.8518518%
不同之处在于排水沟被视为整体环境的一部分。它们会增加每列的宽度,而不是从中减去。