有沒有辦法將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排水溝的寬度從容器寬度的百分比中分離出來？

回答

相關問題