Есть ли способ установить ширину желоба Susy в процентах от ширины контейнера?

При чтении документации Susy берет ширину желоба в процентах от ширины столбца.

У меня есть контейнер шириной 768 пикселей

У меня 3 столбца

Я хочу, чтобы размер каждого желоба составлял 5% от 768 пикселей, то есть 38,4 пикселей

Я использую разделенное положение

Выполнив следующие пятерки, я получу ширину желоба 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%

Число, которое мне нужно предоставить Сьюзи, чтобы получить желаемый процент водосточного желоба (контейнера): 0,428572

Как мне установить ширину желоба Susy в процентах от ширины моего контейнера?


sass compass-sass susy-sass susy
person Rupert    schedule 03.09.2014    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я создал функцию в 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
person Community    schedule 03.09.2014