1

I'm a susy noobie, so apologies if this a daft question...

I'm calculating responsive padding within a susy grid.

The usual calc is of course: (target / context) x 100.

Can susy return the 'context' ie "span(2)", for example, in pixels, so I can add the calculation to my SASS file ... or am I completely missing something ?

Alexander Vogt
  • 17,879
  • 13
  • 52
  • 68
Captain flapjack
  • 426
  • 6
  • 16
  • The answer below is right about one way to get `px` output from Susy — but if you want to use it in this percentage calculation, you are missing the point of Susy. The *only reason Susy exists* is to do that exact calculation for you. Put in your settings, then `span(2 of 12)` (for example), and Susy gives you the percentage output. Notice that `2` and `12` are the `target` and `context`, abstracted into columns. – Miriam Suzanne Jan 21 '15 at 05:15

1 Answers1

3

Susy will calculate your spans by default in percentages, but if you specify "math: static' in your settings, all your outputs will be in your given settings.

Let's say you have 

$susy: {
   container: auto,
   columns: 12,
   column-width: 60px;
   gutters: 1/4,
   math: static,
}

Then you can use the function span() to get the width of a column or group of columns.

And you can say your scss:

.myclass {
   width: span(2);
}

Which in the above example would be equal to saying width: 135px;

Example here.

yivi
  • 42,438
  • 18
  • 116
  • 138
  • Thanks for the reply. I was aware of math: static and in retrospect, I'm fairly sure % and px are mutually exclusive within susy, so I don't think what I'm after is possible, however your answer IS correct, in terms of using px in susy, so green tick for you :) – Captain flapjack Jan 21 '15 at 08:34