有没有办法根据容器宽度的百分比来确定 Susy 排水沟宽度？

Question

在阅读文档时，Susy 将其装订线宽度作为列宽的百分比。

我有一个宽度为 768px 的容器

我有 3 列

我希望每个装订线为 768px 的 5%，即 38.4px

我正在使用拆分的排水沟位置

执行以下操作我的排水沟宽度为 3.33333%：

+with-layout(3 38.4px)
  .three-col
    +span(3 of 3)

但是这样做会给我正确的 5% 的排水沟宽度：

+with-layout(3 0.428572)
  .three-col
    +span(3 of 3)

我通过反复试验找到了这个数字，但似乎无法计算出公式。

我假设以下之间存在关系：

列数：3

装订线数量：6

容器所需的百分比排水沟：5%

我需要提供 Susy 以获得所需的装订线百分比（容器）：0.428572

如何根据容器宽度的百分比设置 Susy 装订线宽度？

Answer 1

我在 Sass 中创建了一个函数，将容器的百分比转换为 Susy 可用的装订线值。 我假设这里有一个分开的排水沟，所以一列的每一侧都有半个排水沟。

也许这对其他人有帮助！

//Convert a percentage of the container to a susy gutter width
//This function assumes a split gutter position
@function calculate-susy-gutter($containerWidth, $numCols, $percentage-of-container: 0.05)
  //get the number of gutters
  $numGutters: $numCols * 2
  //work out the target gutter width based on the container
  $singleGutterWidth: $containerWidth * $percentage-of-container
  //work out the width of all the gutters
  $totalGutterWidth: $singleGutterWidth * $numGutters
  //work out the width of all the columns
  $totalColumnWidth: $containerWidth - $totalGutterWidth
  //work out the width of one column
  $singleColumnWidth: $totalColumnWidth/$numCols
  //work out the percentage that single gutter is of a column
  $gutterPercentageOfColumn: $singleGutterWidth/$singleColumnWidth
  //multiply the value by two
  //Using the split gutter position Susy sees the gutter on each side as half a gutter
  //so we need to double it
  //Therefore the original percentage of the container accounted for one half gutter
  @return $gutterPercentageOfColumn * 2