Search code examples
phpcsssusy-compasssusy

Can susy return a span in pixels?

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 ?

Solution

  • 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.