Sass 是否有一种方法可以将Susy边沟宽度的基础设置为容器宽度的一个百分比?

Sass 是否有一种方法可以将Susy边沟宽度的基础设置为容器宽度的一个百分比?,sass,compass-sass,susy-sass,susy,Sass,Compass Sass,Susy Sass,Susy,在阅读文档时,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) 我通过反复试

在阅读文档时,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边沟宽度?

我在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