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

有没有办法让Susy天沟宽度偏离容器宽度的百分比？

1 个答案: