有没有办法将Susy排水沟的宽度从容器宽度的百分比中分离出来？

在阅读文档时，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)

我发现这个号码了通过反复试验和似乎无法制定出公式。

我假设有下列的关系：

列数：3

编号装订线：6

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

数字我需要提供Susy来获得我想要的排水槽百分比（容器）：0.428572

我如何得到我设置Susy排水沟宽度基于我的容器宽度的百分比？

来源

2014-09-03 Rupert

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

来源

2014-09-03 17:40:35 Rupert

有没有办法将Susy排水沟的宽度从容器宽度的百分比中分离出来？

回答

相关问题