Sass 是否有一种方法可以将Susy边沟宽度的基础设置为容器宽度的一个百分比?
在阅读文档时,Susy将其边距宽度作为列宽的百分比 我有一个宽度为768px的容器 我有3列 我希望每个排水沟为768px的5%,即38.4px 我正在使用分割的边沟位置 执行以下五项操作可使排水沟宽度达到3.33333%: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) 我通过反复试
+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