0

我正在尝试生成跨列跨度为 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);
}

生成的 CSS 为.mosaic：

.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. 为什么它们不符合我的预期？
4

1 回答 1

1

Susy 是这样计算的：

  1. 每列是1列单位宽，加上4/5装订线的列单位。全部的：1.8
  2. 有 12 列。全部的：21.6
  3. 每个装订线计算为.8/21.6（目标/上下文）。全部的：.037037037
  4. 该排水沟被分成两半并转换为百分比。最后：1.8518518%

不同之处在于，排水沟被认为是整个上下文的一部分。它们增加了每列的宽度，而不是从中减去。

于 2014-08-16T21:19:00.233 回答