排水沟如何在Susy 2中运作?

时间:2014-08-14 14:10:53

标签: susy-compass susy-sass gutter susy susy-next

我正在尝试生成跨越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)的排水沟在列跨度的总宽度的每一侧)。

  1. 如何达到预期效果?
  2. 如何计算填充值(1.85 ...%)?
  3. 为什么他们不符合我的期望?

1 个答案:

答案 0 :(得分:1)

这就是Susy的数学方法:

  1. 每列都是1列单位宽,加上4/5列单位的装订线。总计:1.8
  2. 有12列。总计:21.6
  3. 每个装订线都计算为.8/21.6(目标/背景)。总计:.037037037
  4. 那个排水沟被分成两半。转换为百分比。最后:1.8518518%
  5. 不同之处在于排水沟被视为整体环境的一部分。它们会增加每列的宽度,而不是从中减去。